小程序使用swiper时报错， [Component] ＜swiper＞: current 属性无效，请修改 current 值或者页面卡顿，疯狂轮播-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序使用swiper时报错， [Component] ＜swiper＞: current 属性无效，请修改 current 值或者页面卡顿，疯狂轮播。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.报错一

[渲染层错误] [Component] : current 属性无效，请修改 current 值(env: Windows,mp,1.06.2307250; lib: 2.24.0)

<swiper>: current 属性无效,请修改 current 值,小程序,前端,javascript

这个是页面使用轮播组件时，没有添加current属性，添加上就可以了,但是添加后，小程序在手机上锁屏（有时候要等几分钟）重新打开时，页面疯狂卡顿，轮播

 <swiper class="swiper02" autoplay='true' current="{{currentidx}}"  bindchange="swiperChange" circular='true' interval='2000' >
        <block wx:for="{{swiperdata}}" wx:for-item="item" wx:key="id" wx:for-index="index">
                <swiper-item>
                    <image class="swiper" mode="widthFix" src="{{item.imageUrl}}" ></image>
                </swiper-item>
         </block>
    </swiper>

2.造成页面轮播疯狂卡顿，极速轮播

data{
	swiperdata:{},
	currentidx:'0'
}
swiperChange(e){
   let current = e.detail.current
    let source = e.detail.source
// 直接赋值时造成轮播疯狂卡顿，极速轮播，（错误的）
	this.setData({
		currentidx: current,
	})
// 用下面的疯狂卡顿就没有了（正确的）
    if (source == 'autoplay' || source == 'touch') {
      //根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
      this.setData({
        currentidx: current,
      })
    }
}

3.卡顿效果，页面一直处于两个页面切换效果，消息轮播页处于不上不下状态

<swiper>: current 属性无效,请修改 current 值,小程序,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-781100.html

到了这里，关于小程序使用swiper时报错， [Component] ＜swiper＞: current 属性无效，请修改 current 值或者页面卡顿，疯狂轮播的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！