「小程序JAVA實(shí)戰(zhàn)」小程序視圖之細(xì)說(shuō)wx：key列表高級(jí)特

wx:key的高級(jí)特性。這個(gè)很重要，因?yàn)樵赼pp上經(jīng)常有上拉，下拉加載，我們?nèi)绻皇褂眠@個(gè)特性的很可能列表就亂了。源碼：https://github.com/limingios/wxProgram.git 中的No.8

小程序的列表的渲染

1. 官方的闡述
   >https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

1. 演示wx:key
   >如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如 input 中的輸入內(nèi)容，?的選中狀態(tài)），需要使用 wx:key 來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。
   wx:key 的值以兩種形式提供字符串，代表在 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í)的效率。

wxKey.wxml

<!wxKey.wxml-->
<view?class="container">
??<switch?wx:for="{{objectArray}}"?wx:key="unique"?>?{{item.id}}?</switch>
??<button?bindtap="switch">?Switch?</button>
??<button?bindtap="addToFront">?Add?to?the?front?</button>

??<switch?wx:for="{{numberArray}}"?wx:key="*this"?>?{{item}}?</switch>
??<button?bindtap="addNumberToFront">?Add?to?the?front?</button>
</view>

wxKey.js

//wxKey.js
//獲取應(yīng)用實(shí)例
const?app?=?getApp()

Page({
??data:?{
????objectArray:?[{
????????id:?5,
????????unique:?'unique_5'
??????},
??????{
????????id:?4,
????????unique:?'unique_4'
??????},
??????{
????????id:?3,
????????unique:?'unique_3'
??????},
??????{
????????id:?2,
????????unique:?'unique_2'
??????},
??????{
????????id:?1,
????????unique:?'unique_1'
??????},
??????{
????????id:?0,
????????unique:?'unique_0'
??????},
????],
????numberArray:?[1,?2,?3,?4]
??},
??switch:?function(e)?{
????const?length?=?this.data.objectArray.length
????for?(let?i?=?0;?i?<?length;?++i)?{
??????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
????})
??},
??addToFront:?function(e)?{
????const?length?=?this.data.objectArray.length
????this.data.objectArray?=?[{
??????id:?length,
??????unique:?'unique_'?+?length
????}].concat(this.data.objectArray)
????this.setData({
??????objectArray:?this.data.objectArray
????})
??},
??addNumberToFront:?function(e)?{
????this.data.numberArray?=?[this.data.numberArray.length?+?1].concat(this.data.numberArray)
????this.setData({
??????numberArray:?this.data.numberArray
????})

??}

})

如果不加入wx:key=”unique” 或者wx:key=”*this” 進(jìn)行綁定的話，可能存在漂移的情況，這種問(wèn)題很大，建議在for循環(huán)的時(shí)候都定義一個(gè)唯一的key。

PS：列表需要的注意的很多，基本做企業(yè)開(kāi)發(fā)和互聯(lián)網(wǎng)開(kāi)發(fā)列表展示很常見(jiàn)，也是必須的所以在wxml這塊一定要對(duì)for循環(huán)做好處理，key的綁定。小心漂移。