评论

关于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

最后一次编辑于  2021-08-31  
点赞 4
收藏
评论

4 个评论

  • 小橙租车
    小橙租车
    2020-05-20

    这个很赞。

    2020-05-20
    赞同 1
    回复
  • 枫
    2022-01-21

    谢谢楼主,我说怎么数据为空后组件的 current 属性自动变成 -1 了呢(偶现)!?

    2022-01-21
    赞同
    回复
  • guo
    guo
    2020-04-27

    谢谢搂住,搂住V587

    2020-04-27
    赞同
    回复 1
    • guo
      guo
      2020-04-27
      官方有个这样的说明就完美了
      2020-04-27
      回复
  • wei
    wei
    2019-09-30

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

    2019-09-30
    赞同
    回复
登录 后发表内容