微信小程序--swiper轮播图出现抖动问题

问题:在手机上,swiper的item一直在抖动,不滚动了。

官方:

 解决方案:(参考别人的文章,放在离自己的项目代码里)

wxml

复制代码
<view class="swiperBox" style="{{defaultData.indicatorColors}}">
        <swiper
         class="slide-swiper"
         style="height:{{defaultData.bannerheight}}rpx;"
         indicator-dots="{{false}}"
         autoplay="{{true}}"
         interval="{{interval}}"
         duration="{{duration}}"
         indicator-color="{{defaultData.indicatorColor}}"
         indicator-active-color="{{defaultData.indicatorActiveColor}}"
         current="{{currentSwiper}}"
         bindchange="swiperChange"
        >
            <block wx:for="{{defaultData.src}}" wx:key="s_id">
                <swiper-item data-item="{{item}}">
                    <view class=" swiper-item">
                        <image class="swiper-item-img" src="{{item.imgUrl}}" mode="widthFix" />
                    </view>
                </swiper-item>
            </block>
        </swiper>
        <view class="dots {{defaultData.dotsType}}">
            <block wx:for="{{defaultData.src}}" wx:key="src">
                <view class="dot{{index == currentSwiper ? ' active' : ''}}" />
            </block>
        </view>
    </view>
复制代码

js

复制代码
methods: {
    swiperChange: function (e) {
      let { current, source } = e.detail
      if (source === 'autoplay' || source === 'touch') {
        this.setData({
          currentSwiper: current
        })
      }
    },
}
复制代码

 

posted @   小那  阅读(600)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
点击右上角即可分享
微信分享提示