您好,登錄后才能下訂單哦!
這篇文章主要介紹了小程序中WXSS wx:key的作用以及使用實例,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
小程序 WXSS wx:key是怎樣使用的?當列表中的項目動態(tài)的改變的時候,我們需要設置wx:key,Now you can provide attr "wx:key" for a "wx:for" to improve performance.
在循環(huán)數(shù)組的時候有時候會出現(xiàn)如下面的提示。
VM1364:2 ./index/index.wxml (anonymous) @ VM1364:2 VM1364:3 Now you can provide attr "wx:key" for a "wx:for" to improve performance. > 1 | <view wx:for="{{data}}" class="block" style="{{item.style}}"> | ^ 2 | Block{{index}} 3 | <view>{{item.title}}</view> 4 | </view> (anonymous) @ VM1364:3
官方對wx:key的解釋:
如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(tài)(如 <input/>
中的輸入內容, <switch/>
的選中狀態(tài)),需要使用 wx:key
來指定列表中項目的唯一的標識符。
當列表中的項目動態(tài)的改變的時候,我們需要設置wx:key,如果我們不設置,會出現(xiàn)如上圖的情況,我們想要加入數(shù)據(jù)4,在左圖中數(shù)據(jù)4被排在了亂的位置,這個是我們不希望的,因此為了防止這種情況的出現(xiàn),我們設置wx:key.
wx:key
的值以兩種形式提供:
1.字符串,代表在 for 循環(huán)的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字符串或數(shù)字,且不能動態(tài)改變。
2.保留關鍵字 this 代表在 for 循環(huán)中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數(shù)字,如:
當數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候,會校正帶有 key 的組件,框架會確保他們被重新排序,而不是重新創(chuàng)建,以確保使組件保持自身的狀態(tài),并且提高列表渲染時的效率。
<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>
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 }) } })
感謝你能夠認真閱讀完這篇文章,希望小編分享的“小程序中WXSS wx:key的作用以及使用實例”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業(yè)資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。