在使用swiper组件的时候,如果切换循环swiper-item的图片数组的话,会引起数组长度变化。当切换后的数组长度不及切换前的数组长度时,而恰好swiper此时的current记录的位置已经超出了后面的数组的长度,就会报警告。
并且图片显示不出来,情况如下:
修改前代码:
wxml:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeArr"></button>
js:
data: {
imgUrls: ['img1', 'img2', 'img3']
},
changeArr(){
this.setData({
imgUrls: ['img1', 'img2'']
})
}
解决办法非常简单,只需在swiper上面绑定current属性,然后在改变imgUrls时将current的值变成 0 即可
修改后代码:
wxml:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current=“{{current}}”>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeArr"></button>
js:
data: {
imgUrls: ['img1', 'img2', 'img3'],
current:0
},
changeArr(){
this.setData({
imgUrls: ['img1', 'img2''],
current:0
})
}
需要注意的是如果改变imgUrls时是需要从后台请求的话,要等到请求完成后再将current的值改成0
这个很赞。
谢谢楼主,我说怎么数据为空后组件的 current 属性自动变成 -1 了呢(偶现)!?
谢谢搂住,搂住V587
谢谢楼主,原来是这个原因,终于解决了