微信小程序swiper组件非居中对称滑动解决方案

一、前言

在公司的项目中遇到了非居中对称的类 banner 滑动需求，如下图：

banner1

banner2

banner3

每次滑动的距离并非一屏的宽度，而是要根据实际情况来控制。

二、解决方案

一开始看文档，由于 swiper 组件的配置项并不多，我估计能解决这个需求的大概只有 previous-margin，next-margin 和 display-multiple-items 三个参数。

在经过一系列尝试之后，放弃了 display-multiple-items 这个参数，如果使用这个参数，很多时候基本上触发不了 bindchange 事件，并不符合预期也不合理。

于是开始研究 previous-margin 和 next-margin，previous-margin 可以露出前一项的一小部分，next-margin 可以露出后一项的一小部分。于是在初始化时，我把 previous-margin 设置为 28，next-margin 设置为 400，就可以完美展现图 banner1 的效果。（slide 宽度为 300rpx）

<swiper
  class="swiper-container"
  previous-margin="{{swiperDis.previous}}rpx"
  next-margin="{{swiperDis.next}}rpx"
  bindchange="handleSwiperChange"
>
  <block wx:for="{{ImgList}}" wx:key="{{index}}">
    <swiper-item class="slide-item">
      <navigator>
        <view class="slide-content">
          <image class="slide-bg" src="{{item.bg}}" />
        </view>
      </navigator>
    </swiper-item>
  </block>
</swiper>

swiperDis 设置为：

swiperDis: {
  previous: 28,
  next: 400
}

这时候如果滑动的话，会发现后面两个 slier 并不如我们所想，而是每次都会滑到最前面，所以我就想如果我在每次 bindchange 的时候改变 previous-margin 和 next-margin 呢？

于是我加入了这种傻瓜式的代码：

handleSwiperChange(e) {
  const currentIndex = e.detail.current
  if(currentIndex == 0) {
    this.setData({
      swiperDis: {
        previous: 28,
        next: 400
      }
    })
  }else if(currentIndex == 1) {
    this.setData({
      swiperDis: {
        previous: 214,
        next: 214
      }
    })
  }else if(currentIndex == 2) {
    this.setData({
      swiperDis: {
        previous: 400,
        next: 28
      }
    })
  }
}

得到的效果如我所想。唯一不够完美的就是这样设置不如 swiper 自适应滑动的效果那么自然，稍微有那么一点点的卡顿，但我觉得在没有更好的解决办法前这是个又快速又好的方法。