swiper組件即滑塊視圖容器缭裆，通常用來做輪播圖势篡。樣子如下：
從官方的代碼（這里我就不貼了缎岗，大家可以去查閱官方文檔）中可以看出實現(xiàn)輪播圖中的圖片是通過wx:for的方式進行展示的懦铺，這里順便介紹一下小程序的列表渲染殿托。
先來看一段簡單的代碼：
<view wx:for="{{array}}">
{{item}}
</view>
小程序中通過wx:for屬性對數(shù)組進行循環(huán)，以獲得數(shù)組中的每一個元素镰官。其中提前，array是待循環(huán)的數(shù)組，item是默認(rèn)的變量泳唠，表示數(shù)組中每一個元素狈网。
<view wx:for="{{array}}" wx:for-item="itemName">
{{itemName}}
</view>
這段代碼跟原來的感覺上基本一樣，有啥不同呢警检？其實輸出的結(jié)果是一樣的，不同的地方在于我們使用了wx:for-item害淤，wx:for-item屬性執(zhí)行自定義變量名扇雕。也就是你可以不用原來的item，通過wx:for-item來自定義你想使用的item的名字窥摄。
接下來介紹的是wx:for-index,使用wx:for-index指定的變量可以獲取當(dāng)前數(shù)組的索引（從0開始）镶奉。就像這樣子：
<view wx:for="{{array}}" wx:for-item="itemName" wx:for-index="i">
array[{{i}}] = {{itemName}}
</view>
重點來了，下面介紹的是wx:key崭放，先上一段代碼壓壓驚：
index.wxml
<switch wx:for="{{objectArray}}" style="display:block">
{{item.id}}
</switch>
<button bindtap='switch'>點擊進行交換</button>
index.js
Page({
data: {
objectArray: [
{id: 0, unique: 'key0'},
{id: 1, unique: 'key1'},
{id: 2, unique: 'key2'},
{id: 3, unique: 'key3'},
{id: 4, unique: 'key4'},
{id: 5, unique: 'key5'}
]
},
switch(e) {
const length = this.data.objectArray.length
//隨機打亂objectArray中的數(shù)值
for(let i=0; i<length; ++i) {
//獲取0~5中的任意一個數(shù)（即objectArray中的數(shù)值）
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
}
this.setData({
objectArray: this.data.objectArray
})
}
})
例子中有五個按鈕哨苛，這里我選中了第二個和第五個這兩個按鈕，當(dāng)我點擊按鈕時時觸發(fā)switch函數(shù)币砂〗ㄇ停可以看到，最初選中的是第二個和第五個這兩個按鈕决摧，結(jié)果交換兩個數(shù)組時亿蒸，選中的還是第二個和第五個switch按鈕凑兰，可是switch對應(yīng)的數(shù)字卻變了（變成了0和5）。這并不是我們想要的边锁，我們希望的是不管如何交換objectArray數(shù)組中的元素姑食，選中的永遠(yuǎn)是1和5。wx:key就能解決我們的問題啦茅坛！
加上wx:for="unique"之后音半，選中的永遠(yuǎn)都是數(shù)值為1和5的switch按鈕。
補充一點贡蓖，如果數(shù)組元素的類型不是對象曹鸠，而是數(shù)值或字符串，就需要將wx:key屬性的值設(shè)為*this摩梧。
有了基礎(chǔ)之后我們可以動手練習(xí)一下：
這個界面基本都是用列表渲染做出來的物延，輪播圖部分以及四個圖標(biāo)部分。之前是沒有想過用這種方法的仅父，之前都是寫了一坨叛薯，后來看看資料以及別人的例子就發(fā)現(xiàn)這樣子寫可以用少量的代碼做到，多輕松啊笙纤。
突然才發(fā)現(xiàn)簡化代碼真的是門功夫啊耗溜，自己現(xiàn)在的水平真的是差勁極了，以后的路還很長省容。
