收藏
回答

swiper左右抖动问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug swiper 客户端 7.0.4 2.7.0
<swiper  class='swiper-box' bindchange="swiperChange" wx:if="{{listData.style.template_style == 2}}" class='lunbo' autoplay='{{true}}' interval='{{interval}}' indicator-dots='{{listData.style.indicator == "style2"?true:false}}' circular="{{true}}" indicator-color="rgba(131,145,165,0.4)" indicator-active-color="#8391a5" style='height:{{lunboHeight}};padding:0 {{listData.style.pmargin}}px;'>
      <swiper-item class="swiper-item {{img_angle}}" wx:for="{{listData.data}}" wx:key="{{index}}" wx:for-item="item">
        <view class='swiper-img image-item {{img_style}} {{img_angle}}' bindtap="gotoBannerDetail" data-url="{{item.link_addr}}" style="background-image:url({{item.imgurl}});background-size:{{listData.style.fill}};">
          <image class='swiper-img-item' bindload='changeHeight' mode='widthFix' style='width:100%;' src='{{item.imgurl}}'></image>
          <view class='swiper-text {{text_angle}}' wx:if="{{item.name != ''}}">{{item.name}}</view>
        </view>
      </swiper-item>
    </swiper>
    <view wx:if="{{listData.style.indicator == 'style1' && listData.style.template_style == 2}}" class="dots" style='padding:0 {{listData.style.pmargin}}px;'>
      <block wx:for="{{listData.data}}" wx:for-index="dotIndex" wx:key="{{dotIndex}}">
        <view class="dot {{dotIndex == swiperCurrent?'actives':''}}"></view>
      </block>
    </view>

- 当前 Bug 的表现(可附上截图)

手机端一开始进去页面轮播正常,退出来再进去就一直左右抖动,我这边的指示器是自定义的,所以不管用户是否操作都要改current,已经有人提过这个问题了,但没有得到具体的解决办法,是只要判断那个source就行了吗,touch和autoplay都要操作current


- 预期表现

轮播正常,不抖动


- 复现路径


- 提供一个最简复现 Demo


最后一次编辑于  05-21  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • 目光
    目光
    05-21


    还有别的手机,也一样,开发版本我自己测没问题,提交体验版就出现问题了,关键是不是每次都会复现

    05-21
    赞同
    回复 2
    • 十安
      十安
      05-28

      你好,这个问题解决了吗,碰到相同的问题了

      05-28
      回复
    • 目光
      目光
      05-28回复十安

      没有,我指示器改原生的了

      05-28
      回复
  • 是柿子啊
    是柿子啊
    05-21

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    05-21
    赞同
    回复 8
    • 目光
      目光
      05-21

      https://developers.weixin.qq.com/s/COYt0wmJ7M8h


      机型Mi9

      系统安卓版9

      微信版本号 7.0.4


      05-21
      回复
    • 是柿子啊
      是柿子啊
      05-21回复目光

      仅这机型会吗?其他的会吗?

      05-21
      回复
    • 目光
      目光
      05-21回复是柿子啊

      会,但是我没有办法提供给你了,我看社区里面好像也有遇到类似问题的,有一个是说要这样判断的,不知道这样是否可以

      05-21
      回复
    • 是柿子啊
      是柿子啊
      05-21回复目光

      能否提供下录屏呢?另外该组件也在优化中

      05-21
      回复
    • 目光
      目光
      05-22回复是柿子啊

      https://developers.weixin.qq.com/s/C3kTnymO7M8R

      我直接放代码片段里了,不懂怎么发视频

      05-22
      回复
    查看更多(3)
  • GHW💻
    GHW💻
    星期三 21:46

    我是这么解决的:

    bindHousePicSwipperItemChg(e) {

    var now = new Date().getTime();

    var total = now - this.data.lastSwipperItemChgTime

    if (total >= 3000) /*interval="3000"*/{

    this.setData({

    housePicSwipperCurIndex: e.detail.current,

    lastSwipperItemChgTime: now,

    })

    }

    },


    星期三 21:46
    赞同
    回复