前言：

微信小程序的循環(huán)實(shí)現(xiàn)，通過(guò)wx:for 與 wx:for-items 與 wx:key,那么他的主要使用特點(diǎn)是什么呢？

1 wx:for

從目前的例子看，wx:for 的使用確實(shí)是對(duì)數(shù)組來(lái)做的，參考微信icon示例程序。

示例里面都是對(duì)數(shù)組進(jìn)行條件判斷，比如iconsizejius就是一個(gè)典型的數(shù)組。

2 wx:for-items 與wx:for-item

2.1 wx:for-items

現(xiàn)在看wx:for-items， 和wx:for比，wx:for-items有什么不同呢？

【案】筆者認(rèn)為wx:for-items應(yīng)該可以包容wx:for，而不是像有些朋友說(shuō)，wx:for用于數(shù)組的單循環(huán)，而wx:for-items用于可嵌套的多級(jí)循環(huán)。

 很顯然，wx:for-items，在上面的例子里面用于數(shù)組，也同時(shí)用于外層的單循環(huán)。

【案】

<view wx:for-items="{{array}}" wx:for-item="item">

分析一下，

wx:for-items首先指向了數(shù)組array,

之后，wx:for-items 選取了item，做進(jìn)一步的循環(huán)STEPS，

我們看到array的一個(gè)item包含兩個(gè)屬性，

2.2 wx:for-item

wx:for-item注意wx:for-items比少了S,wx:for-item主要只是對(duì)循環(huán)項(xiàng)目數(shù)組的元素（item in array）重新命名，這里

這里array的元素被item取代來(lái)表示。

 還是剛才的例子，現(xiàn)在看右邊，item被用于對(duì)循環(huán)內(nèi)體的設(shè)置，

然后實(shí)現(xiàn)對(duì)數(shù)組內(nèi)多個(gè)元素的渲染

3  wx:key

 wx:key是對(duì)微信循環(huán)功能的一次提升，在軟件編譯的時(shí)候，微信會(huì)提示你是用 wx:key來(lái)穩(wěn)定視圖層的項(xiàng)目顯示。

摘取 一段定義的描述，

wx:key 的值以3種形式提供

• 字符串

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

• 保留關(guān)鍵字 *this

代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個(gè)唯一的字符串或者數(shù)字，如： 
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

一般是指定一個(gè)唯一的字段(類似于id的定義);

• 通配符+名字 

例如 *item

 4 嵌套的應(yīng)用

上面的例子都比較簡(jiǎn)單，只有一層或者一個(gè)屬性的嵌套，現(xiàn)在看一個(gè)復(fù)雜一點(diǎn)的，例子，來(lái)源于官方的組件展示程序。

這是一個(gè)多級(jí)菜單的展示，用戶點(diǎn)擊后，會(huì)展開(kāi)三個(gè)選項(xiàng)，而每一個(gè)選項(xiàng)對(duì)應(yīng)一個(gè)頁(yè)面，

<view class="index-bd">
 <view class="kind-list">
  <block wx:for-items="{{list}}" wx:key="{{item.id}}">
  <view class="kind-list-item">
   <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
   <view class="kind-list-text">{{item.name}}</view>
   <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
   </view>
   <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
   <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
    <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
    <navigator url="pages/{{page}}/{{page}}" class="navigator">
     <view class="navigator-text">{{page}}</view>
     <view class="navigator-arrow"></view>
    </navigator>
    </block>
   </view>
   </view>
  </view>
  </block>
 </view>
 </view>

從這段代碼里面，我們看到， 針對(duì)上面這個(gè)比較復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，在block tag里面（有兩層block)

先對(duì)list，用wx:for-items，

<block wx:for-items="{{list}}" wx:key="{{item.id}}">

做最外層循環(huán)，這里list里面的數(shù)組元素，就變?yōu)閕tem了，item有4個(gè)屬性，其中一個(gè)是pages,

【注意】這里wx:for-items和wx:for的不同就是，wx:for-items默認(rèn)的循環(huán)項(xiàng)為item,不需要指定了。所以，第二層循環(huán)的item,解釋器已經(jīng)理解了，現(xiàn)在item下面的pages，依舊是一個(gè)數(shù)組，我們可以在嵌套來(lái)遍歷他。

<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">

然后，用wx:for-items，對(duì)list里面的pages屬性內(nèi)嵌數(shù)組做了遍歷循環(huán)，注意，后面又立即跟了wx:for-item="page"，注意，這里沒(méi)有s,就是對(duì)item的元素pages數(shù)組的元素重新命名為page了，后面的page操作，就是對(duì)這個(gè)內(nèi)嵌數(shù)組操作。這里wx:for-item的命名其實(shí)是一個(gè)可選項(xiàng)，如果不命名，默認(rèn)就是item，也就是嵌套的循環(huán)下標(biāo)也是item，大概是為了避免誤解，導(dǎo)致，微信團(tuán)隊(duì)，又加了這一個(gè)功能，個(gè)人覺(jué)得有點(diǎn)多余。

參考：

1小程序wx:for、wx:for-items和wx:for-item的正確用法

https://developers.weixin.qq.com/miniprogram/dev/component/image.html?search-key=wx%3Afor

2 微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的關(guān)系及正確使用

https://blog.csdn.net/u013338742/article/details/78785918

到此這篇關(guān)于微信小程序 wx:for 與 wx:for-items 與 wx:key的正確用法的文章就介紹到這了,更多相關(guān)小程序 wx:for wx:for-items wx:key內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論