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

Z时代
2024-01-10
分类：技术分享

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

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

解决方案

一开始看文档，由于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
      }
    })
  }}