当前位置:   article > 正文

小程序使用swiper时报错, [Component] <swiper>: current 属性无效,请修改 current 值或者页面卡顿,疯狂轮播_: current 属性无效,请修改 current 值

: current 属性无效,请修改 current 值

1.报错一

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

在这里插入图片描述

这个是页面使用轮播组件时,没有添加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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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,
      })
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3d36f64d98cf4abbbc69b0a166978f86.png

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/293372
推荐阅读
相关标签
  

闽ICP备14008679号