小程序数组更新 但swiper不正常显示问题

小伙伴们，今天小汪带来的是自己在项目中出现的一个小问题，如果能给大家带来丁点的帮助，嘿嘿 老规矩（滑稽保命）。
好的 进入正题，因为小汪正在写的是一个小程序商城的项目，也是后来接的手，事情的起因是什么呢，请看截图：

1. 第一个tab卡的轮播图数据有6张，也展示了6张，是正常的 可是到第二个tab卡中轮播图就不展示了，到这里可能大家心里想有没有可能是第二个轮播图没有数据呢？ 请看下图：

2. 包括WXML中也实实在在的存在着img的元素也有链接，但轮播图内容就是不显示。
   
   可能心细的伙伴已经发现了问题，接下来就是问题出现的原因和解决的方法了。

3. 当轮播图当前展示的图片发生改变时（也就是图片索引），如果用户没有添加 current 属性值，框架则会自动绑定当前展示的索引值。

4. 页面发生切换时，current 的值会被存储，也就是记住当前轮播的索引。再次返回会重新给current赋上当前存储的索引值。

5. 比方：假设当前的图片是第4张，那么在未设置 current 的时候，框架会给 current 赋值 =3（对应索引），切换页面改变渲染的数组之后，如果该数组的长度是3，也就是最大 索引 = 2 ，框架还是会给默认的 current 赋值3（此时渲染swiper的img数组里根本没有索引为3的图片），没有找到就会导致元素为空，但是0-2的数据是存在的，所以页面会显示位置占位，但是这个占位得元素里没有内容。 相信看到这里就应该想到怎么解决了吧。

6. 解决方法：在swiper标签中添加属性 current ， 在每一次切换tab卡时，将绑定给 current 属性的变量重置到下标0即可；代码如下：

 WXML代码
<swiper current="{{swipeiCurrent}}">
	<block wx:for="{{showPNG}}" wx:key="index">
		<swiper-item bindtap="Link" data-index='{{index}}' >
			<view class="iview fadeIn" hidden="{{showlist}}">
				<image src="{{item.imgUrl}}" mode="widthFix"/>
			</view>
		</swiper-item>
	</block>
</swiper>

 js代码
const that = this; Ps：这里是我的一个习惯，可以直接用this的
that.setData({
   swipeiCurrent: 0
})

这就是小汪在开发中出现的小插曲，希望大家在开发中出现Bug不要太过烦躁，如果能帮助到大家 我想我们都会很开心。我们下篇再见！