微信小程式實例介紹之列表渲染

本篇文章為大家帶來了關於微信小程式的相關知識，其中主要介紹了關於列表渲染的相關內容，下面一起來看一下，希望對大家有幫助。

【相關學習推薦：小程式學習教學】

wx:for

透過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>

hacker.js

Page({    data:{        userList:[
            {id: 1,name: 'hacker'},
            {id: 2,name: 'meng'},
            {id: 3,name: 'yuan'}
        ]
    }
})

運行結果如下：

【相關學習推薦：小程式學習教學】

以上是微信小程式實例介紹之列表渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！