小程序----列表渲染

文章目录

• • 1 wx:for
  • 2 手动指定索引和当前项的变量名
  • 3 wx:key 的使用

1 wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构。

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

<view wx:for="{{arr}}">索引：{{index}} -- 当前项：{{item}}
view>

// pages/list/list.js
Page({data: {arr: ['a','b','c','d','e','f',]}
})

2 手动指定索引和当前项的变量名

使用 wx:for-index 可以指定当前循环项的索引的变量名

使用 wx:for-item 可以指定当前项的变量名

<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="content">索引：{{idx}} -- 当前项：{{content}}
view>

3 wx:key 的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率。

列表渲染中的key一般选用具有唯一性的id，不建议使用索引，因为不能进行唯一标识每一项，索引会根据数组中元素个数、位置的变化而改变(索引对应的项发生改变)。

<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="content"wx:key="id"
>id: {{content.id}}索引：{{idx}} -- 当前项：{{content.content}}
view>

// pages/list/list.js
Page({data: {arr: [{id: 1, content: 'a'},{id: 2, content: 'b'},{id: 3, content: 'c'},{id: 4, content: 'd'},{id: 5, content: 'e'}]}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！