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

34次阅读

共计 1300 个字符,预计需要花费 4 分钟才能阅读完成。

一、前言

在公司的项目中遇到了非居中对称的类 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 自适应滑动的效果那么自然,稍微有那么一点点的卡顿,但我觉得在没有更好的解决办法前这是个又快速又好的方法。

正文完
 0