用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-11-12 00:02

一、前言在公司的项目中遇到了非居中对称的类banner滑动需求,如下图:每次滑动的距离并非一屏的宽度,而是要根据实际情况来控制。二、解决方案一开始看文档,由于swiper组件的配置项并不多,我估计能解决这个需求的 ...

一、前言

在公司的项目中遇到了非居中对称的类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
      }
    })
  }
}

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Peggy7 来自: segmentfault