先上个效果图:
image.png
想要有一种前后有间距的效果
思路: swiper-item不能直接调整样式来控制间距,只能通过减少图片盒子的大小,再水平居中来实现空白的地方,
先露出前后一张
<swiper
previous-margin="20"// 这个是重点
next-margin="20" //这个是重点
class="banner">
<block wx:for="{{propData}}" wx:key="key">
<swiper-item>
<view class="box">
<image src="{{item.images_url}}" mode="aspectFill" data-value="{{item.event_value}}" data-type="{{item.event_type}}" bindtap="banner_event" />
</view>
</swiper-item>
</block>
</swiper>
再通过调整样式
/*轮播图组件高度*/
.banner {
background: #fff;
margin-bottom: 20rpx;
height: 360rpx;
}
/*轮播图片*/
.banner image {
width: 636rpx;
height: 360rpx;/*这里是重点*/
border-radius: 12rpx;
}
swiper-item{
text-align: center;/*这里是重点*/
}
/*图片的容器*/
.box{
display: inline-block; /*这里是重点*/
width: 96%;/*这里是重点*/
height: 360rpx;
}
只用轮播组件上的设置previous-margin是无法直接控制白色间距的
给图片加个box容器,设置宽度98%,百分比,大概是多少自己可以衡量,这样可以控制白色间距,
再利用text-align:center;让图片居中,就达到了两边空白效果,box记得为行内块元素才可以center
