评论

关于swiper组件的current问题导致图片不显示

使用swiper组件时,切换图片路径数组而引起长度变化。当切换后的数组长度不及切换前的数组长度时,而恰好swiper此时的current记录的位置已经超出了后面的数组的长度,就会出问题

在使用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

最后一次编辑于  08-06  
点赞 2
收藏
评论

1 个评论

  • JOKER
    JOKER
    09-30

    谢谢楼主,原来是这个原因,终于解决了

    09-30
    赞同
    回复