zoukankan      html  css  js  c++  java
  • 微信小程序-swiper(轮播图)抖动问题

    ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动

    以前遇到这个问题,官方一直没有正面回复。就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东西

    就一直抖动这个问题,官方更新了一下出现bug的原因,没有具体阐述怎么去解决,但是总体说也给出了一个方案,大家可以去尝试一下是否还出现这个问题。下面是我根据官方,一直找了部分资料做了些处理就不说了,直接贴代码

    wxml

    <view class="swiper">
        <swiper
        autoplay="true" interval="4000" current="{{swiperCurrent}}" duration="1000" bindchange="swiperChange">
          <swiper-item wx:for="{{bannerList}}" wx:key="*this" data-page="activity" data-id="{{item.id}}" data-type="{{item.type}}">
            <image src='{{item.pictureUrl}}' class='u-img-slide' ></image>
        </swiper-item>
        </swiper>
        <view class="dots">
      <!-- 自定义角标 -->
          <block wx:for="{{bannerList}}" wx:key="*this">
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
          </block>
        </view>
     </view>
    

     js

    swiperChange(e) { 
        let {current, source} = e.detail
        if(source === 'autoplay' || source === 'touch') { 
        //根据官方 source 来进行判断swiper的change事件是通过什么来触发的,autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的,所以做了限制,只有在自动轮播和用户主动触发才去改变current值,达到规避了抖动bug
          this.setData({
            swiperCurrent: current
          })
        }
      },
    

     主要是为了规避轮播抖动的bug,大家有更好的方案也可以在文章下评论,我也可以及时去更新,谢谢

  • 相关阅读:
    第一次MVC记录
    Treeview绑定以及添加多选功能
    BindingSource的使用
    WPF实现环(圆)形进度条
    WPF实现环(圆)形菜单
    WPF实现音乐字幕动画
    WPF加载高德地图
    WPF实现Android(3D)菜单翻转动画
    WPF实现头像裁剪
    WPF PointAnimationUsingKeyFrames 动画
  • 原文地址:https://www.cnblogs.com/zwp06/p/12857459.html
Copyright © 2011-2022 走看看