小程序 swiper 前后边距的使用

小程序swiper 其中提供了两个属性，previous-margin和next-margin；

previous-margin：前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值；

next-margin：后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

假设设置 一个view的尺寸为宽为640rpx,高为360rpx，前边距为25rpx,后边距为25rpx,如果此时直接为previous-margin和 next-margin设置为25rpx，看到效果可能不是想要的那样，可能如下

    <swiper previous-margin="25rpx" next-margin="25rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swiper_curPage}}" autoplay="true" circular="true" class="swiper">
        <block wx:for="{{list}}" wx:for-item="item" wx:key="{{item.imgUrl+index}}">
            <swiper-item class='swiper_item'>
                    <image src='{{item.imgUrl}}' class="swiper_imge" mode='scaleToFill' data-item="{{item}}" bindtap="swiperItemOnClick"></image>
            </swiper-item>
        </block>
    </swiper>

image.png

此时我们不应该直接为previous-margin和 next-margin设置为25rpx，他们值应该重新算，现在我想要达到我上面想要的效果，应该怎么算呢，算法如下：

1. 根据屏幕尺寸宽度为750rpx来计算；
2. 确定想要图片露出的尺寸，假设为25rpx，图片显示宽度为640rpx;
3. 屏幕宽度-图片的宽度，得到两边的边距和；
   750-640=110
4. 将边距拆成两部分，得到一边的边距，用边距减去露出的尺寸，得到两张图片之间的边距； 由于swiper-item的宽度不能改成图片的大小，只能将盒子图片居中了，盒子内边距作为空白间隙；
   110/2-25=30
5. 图片间距 拆成两部分，分别为图片的外边距
   30/2=15
6. 露出的尺寸 加上 外边距 就等于前后边距的值
   　25+15=40
   所以最后我们应该给previous-margin和 next-margin设置为40rpx；同时注意设置图片宽度640rpx;效果就达到了，代码如下

<view class="container">
    <swiper previous-margin="40rpx" next-margin="40rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swiper_curPage}}" autoplay="true" circular="true" class="swiper">
        <block wx:for="{{list}}" wx:for-item="item" wx:key="{{item.imgUrl+index}}">
            <swiper-item class='swiper_item'>
                    <image src='{{item.imgUrl}}' class="swiper_imge" mode='scaleToFill' data-item="{{item}}" bindtap="swiperItemOnClick"></image>
            </swiper-item>
        </block>
    </swiper>
</view>

.container{
  position: relative;
}

.swiper {
  width: 100%;
  height: 360rpx;
  margin: 30rpx 0rpx;
  background-color: #FFFFFF;
}

.swiper_item {
  height: 360rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper_imge {
  width: 640rpx;
  height: 360rpx;
  background-color: #FFFFFF;
  border-radius:20px;
}

image.png