小程序數組更新 但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不要太過煩躁，如果能幫助到大家 我想我們都會很開心。我們下篇再見！