本篇文章為大家帶來了關於微信小程式的相關知識,其中主要介紹了關於列表渲染的相關內容,下面一起來看一下,希望對大家有幫助。
【相關學習推薦:小程式學習教學】
透過wx:for可以根據指定的數組,循環渲染重複的元件結構,語法範例如下:
<view> 索引是:{{index}} 当前项是:{{item}} </view>
預設情況下,目前循環項目的索引以index表示;目前循環項用item表示hacker.wxml 定義一個for迴圈存取數組
<view> 索引是:{{index}} 当前项是:{{item}} </view>
hacker.js 定義一個陣列
Page({ data:{ arr1:['a','b','c'] } })
運行結果如下:
使用wx:for-index可以指定目前循環項的索引的變數名 使用wx:for-item可以指定目前項目的變數名 範例程式碼如下:
<view> 索引是:{{idx}} 当前项是:{{itemName}} </view>
hacker.wxml
<view> 索引是:{{idx}} 当前项是:{{itemName}} </view>
hacker.js
Page({ data:{ arr1:['a','b','c'] } })
運行結果如下:
##wx:key的使用類似於Vue列表渲染中的:key,小程式在實作清單渲染時,也建議為渲染出來的清單項目指定唯一的key值,從而提高渲染的效率,範例程式碼如下: hacker.wxml<view>{{item.name}}</view>
Page({ data:{ userList:[ {id: 1,name: 'hacker'}, {id: 2,name: 'meng'}, {id: 3,name: 'yuan'} ] } })
【相關學習推薦:小程式學習教學】
以上是微信小程式實例介紹之列表渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!