为了账号安全,请及时绑定邮箱和手机立即绑定

老是请问我在swiper-item中设置了padding 超出了父容器100%的宽度 导致swiper显示异常,请问一下这种情况如何解决呢

<template>
	<view class="banner-box">	
		<view class="banner-bg">
			<!-- 背景 -->
		</view>
		<swiper class="banner-swiper" 
		indicator-color="rgba(255, 255, 255, .5)" 
		indicator-active-color="#fad3d4" 
		:indicator-dots="true" 
		:autoplay="false" 
		:interval="5000" 
		:duration="500">
			<swiper-item class="swiper-item">
				<img src="/static/banner/banner_1.png" alt="">			
			</swiper-item>
			<swiper-item class="swiper-item">
				<img src="/static/banner/banner_2.png" alt="">			
			</swiper-item>
			<swiper-item class="swiper-item">
				<img src="/static/banner/banner_3.jpg" alt="">
			</swiper-item>
		</swiper>
	</view>
</template>	
<style>
	.banner-box{	
		padding-top: 120rpx;
		.banner-bg{
			position: absolute;
			top: 0;
			width: 100%;
			height: 470rpx;
			transform: .5s;
		}
		.banner-swiper{
			width: 100%;
			height: 350rpx;
			// box-sizing: border-box;	
			.swiper-item{
				width: 100%;
				height: 100%;	
				padding: 0 30rpx;
			}
			image {
				width: 100%; height: 100%;
				border-radius: 15rpx;
			}
		}	
	}
</style>

http://img1.sycdn.imooc.com//64b7998c0001294e11910966.jpghttp://img1.sycdn.imooc.com//64b7998f0001ecc808660936.jpghttp://img1.sycdn.imooc.com//64b7999500013fdc06681292.jpghttp://img1.sycdn.imooc.com//64b799970001ac5906311299.jpg

正在回答

1 回答

在子容器 swiper-item中 加一行 box-sizing: border-box; 解决  之前加到父容器了  😓

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

老是请问我在swiper-item中设置了padding 超出了父容器100%的宽度 导致swiper显示异常,请问一下这种情况如何解决呢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信