小程序间距轮播图

先上个效果图:

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

注意 : 用边距不好实现,微信自带swiper-item实际都是用到是transform中的tranlate位移,用边距会出现奇奇怪怪的东西