• ?? 所屬專欄：【微信小程序開(kāi)發(fā)教程】

• ?? 作??者：我是夜闌的狗??

• ?? 個(gè)人簡(jiǎn)介：一個(gè)正在努力學(xué)技術(shù)的CV工程師，專注基礎(chǔ)和實(shí)戰(zhàn)分享 ，歡迎咨詢！

• ?? 歡迎大家：這里是CSDN，我總結(jié)知識(shí)的地方，喜歡的話請(qǐng)三連，有問(wèn)題請(qǐng)私信 ?? ?? ??

前言

??大家好，又見(jiàn)面了，我是夜闌的狗??，本文是專欄【微信小程序開(kāi)發(fā)教程】專欄的第12篇文章;
??今天開(kāi)始學(xué)習(xí)微信小程序的第八天??????，開(kāi)啟新的征程，記錄最美好的時(shí)刻??，每天進(jìn)步一點(diǎn)點(diǎn)。不知不覺(jué)已經(jīng)學(xué)習(xí)微信小程序八天了，估計(jì)大佬們一天就學(xué)完這些內(nèi)容了吧，我還在慢吞吞的學(xué)完，然后在看官方文檔總結(jié)寫寫文章
??專欄地址：【微信小程序開(kāi)發(fā)教程】， 此專欄是我是夜闌的狗微信小程序開(kāi)發(fā)過(guò)程的總結(jié)，希望能夠加深自己的印象，以及幫助到其他的小伙伴????。
??如果文章有什么需要改進(jìn)的地方還請(qǐng)大佬不吝賜教????。

一、列表渲染

??前面已經(jīng)介紹完了WXML模板語(yǔ)法–條件渲染，通過(guò)栗子學(xué)習(xí)到了如何在WXML頁(yè)面上進(jìn)行條件渲染，也了解到兩中渲染方式。接下來(lái)就來(lái)講解一下另外一個(gè)模板語(yǔ)法–列表渲染。話不多說(shuō)，讓我們?cè)脑倮m(xù)，書接上回吧。

1、wx:for

?? 在實(shí)際開(kāi)發(fā)過(guò)程中，會(huì)需要顯示多個(gè)相同的組件，此時(shí)只要在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。這里對(duì)數(shù)組的引用都是用 Mustache 語(yǔ)法（雙花括號(hào)）來(lái)表示， 具體代碼如下所示：

cshPageTab.wxml：

<view wx:for="{{array}}">
  當(dāng)前篇數(shù)：{{index}} 當(dāng)前學(xué)習(xí)天數(shù)：{{item}} 
</view> 

?? 默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item。

cshPageTab.js：

Page({
  data: {
	array:["1","2","3","4","5","6","7","8"],
  },
})

??此時(shí)就完成將數(shù)組每項(xiàng)數(shù)據(jù)都渲染到組件上，實(shí)際效果如下所示：

2、指定索引和當(dāng)前項(xiàng)的變量名

??在列表渲染的過(guò)程中，可以通過(guò)使用 wx:for-index 可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名 ，使用 wx:for-item 可以指定當(dāng)前項(xiàng)的變量名，不過(guò)在開(kāi)發(fā)過(guò)程這種用法比較少用到，具體代碼如下：

cshPageTab.wxml：
??可以在上面栗子的基礎(chǔ)進(jìn)行改動(dòng)，看是否能改動(dòng)成功。

<view wx:for="{{array}}">
  當(dāng)前篇數(shù)：{{index}} 當(dāng)前學(xué)習(xí)天數(shù)：{{item}} 
</view>
<view>----------------</view>
<view wx:for="{{array}}" wx:for-index="ids" wx:for-item="ids">
  當(dāng)前篇數(shù)：{{ids}} 當(dāng)前學(xué)習(xí)天數(shù)：{{ids}} 
</view>

??可以看出這兩者的渲染效果是一樣的，來(lái)看下實(shí)際運(yùn)行效果：

3、<block> 使用 wx:for

??前面再講 wx:if 條件渲染的時(shí)候就用到了 <block> 標(biāo)簽，同樣該標(biāo)簽也適用于 wx:for ，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。具體代碼如下：

cshPageTab.wxml：

<block wx:for="{{['好好學(xué)習(xí)','天天向上','各位大佬好']}}">
  <view>{{index}}</view>
  <view>{{item}}</view>
</block>

?? 可以來(lái)看一下運(yùn)行效果：

4、wx:key 的使用

??當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，不帶有 key 的組件會(huì)被重新創(chuàng)建，而不會(huì)重新排序，所以需要使用 wx:key 來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。wx:key 的值以兩種形式提供：

• 在 for 循環(huán)的 array 中 item 的某個(gè) property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動(dòng)態(tài)改變。

• 可以當(dāng)前數(shù)組的索引 index 來(lái)當(dāng)其 key。

??在實(shí)際開(kāi)發(fā)過(guò)程中，建議只要使用到 wx:for 都要加 key，具體代碼如下：

cshPageTab.wxml：

??wx:key 外面是可以不用 Mustache 語(yǔ)法來(lái)表示的

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

??類似于 Vue 列表渲染中的 :key，小程序在實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來(lái)的列表項(xiàng)指定唯一的 key 值，從而提高渲染的效率。如果沒(méi)有 id ，也可以使用索引來(lái)當(dāng) key 值。

cshPageTab.js：

Page({
  data: {
	userList:[
      {id: 1, name: '狂飆'},
      {id: 2, name: '安欣'},
      {id: 3, name: '高啟強(qiáng)'},
      {id: 4, name: '孫子兵法'}
    ],
  },
})

??此時(shí)就可以成功的把數(shù)組里的數(shù)據(jù)渲染出來(lái)，可以來(lái)看下實(shí)際運(yùn)行效果：

??接下來(lái)可以切換到 Console 面板，如果我們?cè)谘h(huán)時(shí)候不適用 key 會(huì)顯示出警告，提示可以給循環(huán)提供 key，前面的循環(huán)都沒(méi)有使用 key 。

總結(jié)

??感謝觀看，這里就是WXML 模板語(yǔ)法 - 列表渲染 – wx:for & wx:key的介紹使用，如果覺(jué)得有幫助，請(qǐng)給文章點(diǎn)個(gè)贊吧，讓更多的人看到。?? ?? ??

??也歡迎你，關(guān)注我。?? ?? ??

??原創(chuàng)不易，還希望各位大佬支持一下，你們的點(diǎn)贊、收藏和留言對(duì)我真的很重要?。?！?? ?? ?? 最后，本文仍有許多不足之處，歡迎各位認(rèn)真讀完文章的小伙伴們隨時(shí)私信交流、批評(píng)指正！下期再見(jiàn)。??

更多專欄訂閱:

• ?? 【LeetCode題解（持續(xù)更新中）】
• ?? 【Java Web項(xiàng)目構(gòu)建過(guò)程】
• ?? 【微信小程序開(kāi)發(fā)教程】
• ? 【JavaScript隨手筆記】
• ?? 【大數(shù)據(jù)學(xué)習(xí)筆記（華為云）】
• ?? 【程序錯(cuò)誤解決方法（建議收藏）】
• ?? 【軟件安裝教程】

訂閱更多，你們將會(huì)看到更多的優(yōu)質(zhì)內(nèi)容?。?/font>文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-528495.html

到了這里，關(guān)于【微信小程序】-- WXML 模板語(yǔ)法 - 列表渲染 -- wx:for & wx:key（十二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！