微信小程序之for循環
在微信小程序中也有for循環，用於進行列表渲染。
官方實例
打開衛星開發者文檔，在框架部分的視圖層--》wxml--》列表渲染中可以看到官方給出的for循環實例，在實例中 可以看到下面相關說明。
默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item；使用 wx:for-item 可以指定數組當前元素的變量名，使用 wx:for-index 可以指定數組當前下標的變量名。
test.wxml
<view wx:for="{{array}}"> {{index}}: {{item.message}} </view> <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>test.js
在上面的例子中，針對同一個數組，分別使用兩種不同的方式，得到了相同的結果，也就是官網說明中指出的，index 和 wx:for-index 都可以用來表示元素下標，而item 和 wx:for-item 都可以用來表示元素，但在實際運用中，我們使用for循環的時候，更多的是希望可以通過點擊事件獲得元素的索引下標，而不是在列表中展示下標。
獲取數組索引
wx:for-index 方式
在微信小程序中，元素也有id屬性，並且可以通過點擊該元素獲得其id，因此，我們只需要將id與元素下標進行綁定，就可以通過id來獲得索引下標了。
對上面的代碼稍作修改，得到下面的例子
test.wxml
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" id="{{idx}}" bindtap=‘toindex‘> {{idx}}: {{itemName.message}} </view>test.js
toindex(e){ console.log(e); var idx = parseInt(e.currentTarget.id); }
在上面的介紹中，我們知道 wx:for-index可以用來表示下標，因此將 wx:for-index的值通過id進行綁定，通過bindtap為列表項添加點擊事件，當我們點擊列表項中的第二項時，在test.js中得到上圖的打印結果，在上面的輸出結果對象中，打印出了列表項的id值，但是一個字符串，因此我們需要通過parseInt將其轉為整數即可。上面的idx就是我們需要的索引值了。
index 方式
在官網實例中指出，除了wx:for-index可以用來表示下標外，默認的下標變量名是index，因此我們也可以直接將index同id進行綁定，只需要更改test.wxml文件就可以了，這樣還可以減少代碼書寫量。
<view wx:for="{{array}}" id="{{index}}" bindtap=‘toindex‘> {{index}}: {{item.message}} </view>上面兩中方式的完整代碼如下：
test.wxml
<view wx:for="{{array}}" id="{{index}}" bindtap=‘toindex‘> {{index}}: {{item.message}} </view> <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" id="{{idx}}" bindtap=‘toindex‘> {{idx}}: {{itemName.message}} </view>test.js
Page({ data: { array: [ {message: ‘foo‘,}, {message: ‘bar‘} ] }, toindex(e){ console.log(e)； var idx = parseInt(e.currentTarget.id); } })通過點擊事件添加樣式
在for循環列表中，我們通常會通過點擊事件來確定當前選中項，為了突出顯示當前選中項，會為當前選擇項添加特殊樣式，在微信小程序中，也可以實現這種效果。
test.wxml
<view class="test {{cur==index ? ‘active‘ : ‘‘}}" wx:for="{{array}}" id="{{index}}" bindtap=‘toindex‘> {{item}} </view>test.wxss
.test{ width:50px; height:20px; line-height: 20px; margin: 5px auto; font-size: 13px; border:1px solid #7d7d7d; border-radius: 20px; text-align: center; } .test.active{ color:#ffffff; background-color:#7d7d7d; }test.js
Page({ data: { array: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周天‘], cur:0 }, toindex(e){ var idx = parseInt(e.currentTarget.id); this.setData({ cur: idx }); } })
在上面的代碼中，首先通過一個變量cur表示當前選擇項，默認為第一項，即下標為0的項，然後將索引同id綁定，通過點擊事件獲得當前項的索引，將值賦給cur，在test.wxss中，.test代表的是默認的樣式，而.test.active則代表選擇項的特殊樣式。
給for循環裏單獨的view添加單獨的樣式
使用for循環是未來渲染具有相同樣式的列表，但有的時候，我們由需要給for循環裏單獨的view添加單獨的樣式，例如在上面的例子中，每一個列表項的默認樣式都是相同，但是現在需要將工作日和休息日進行區分，添加不同的樣式，此時，我們就可以使用到條件渲染了，具體代碼如下：
test.wxml
<view class="test" wx:for="{{array}}" > <view class="Sat" wx:if="{{item==‘周六‘}}">{{item}}</view> <view class="Sun" wx:elif="{{item==‘周天‘}}">{{item}}</view> <view wx:else>{{item}}</view> </view>test.wxss
.test{ width:50px; height:20px; line-height: 20px; margin: 5px auto; font-size: 13px; border:1px solid #7d7d7d; border-radius: 20px; text-align: center; } .Sat{ color:#ffffff; border-radius: 20px; background-color:#FF6347; } .Sun{ color:#ffffff; border-radius: 20px; background-color:#FF1493; }test.js
Page({ data: { array: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周天‘], } })
微信小程序之for循環