文章目录
- 1.wx:for实现列表渲染
- 2.block结合wx:for使用
- 3. wx:key实现列表渲染
- 4.注意事项
文章图片
1.wx:for实现列表渲染 【微信小程序|【微信小程序】三分钟学会小程序的列表渲染】在组件上使用
wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
{{index}}: {{item}}
Page({
data: {
array: ['第一项','第二项','第三项']
}
})另外，使用
wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：
{{idx}}: {{itemName}}
下面做一个演示：在同时，js中定义一个数组，使用wx:for在wxml中重复渲染view组件结构：
文章图片
文章图片
显示效果如下：
文章图片
wx:for还可以嵌套使用。2.block结合wx:for使用 当把
wx:for使用到
{{index}}:
{{item}}
这种使用方法类似于上节的
wx:if结合block使用来实现条件渲染的方式。3. wx:key实现列表渲染 小程序在进行列表渲染时，建议为渲染出来的列表项指定唯一的
key值，从而提高渲染的效率。wx:key 的值以两种形式提供- 字符串，代表在
for循环的array中item的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 - 保留关键字
*this代表在for循环中的item本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态。
{{item.id}}:{{item.name}}
Page({
data: {
userlist:[
{id:1,name:'zhang'},
{id:2,name:'wang'},
{id:3,name:'li'}
]
}
})
注意：如不提供
wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
文章图片
4.注意事项
- 花括号和引号之间如果有空格，将最终被解析成为字符串。
- 当
wx:for的值为字符串时，会将字符串解析成字符串数组。
{{item}}
和以下情况相同：
{{item}}
推荐阅读
- 微信小程序|微信小程序 小程序自定义组件与组件间操作(笔记)
- 微信小程序开发|微信小程序--四、基础加强
- 微信小程序|微信小程序（3）自定义组件
- web前端|微信小程序组件化
- 微信小程序|微信小程序自定义标签组件component封装、组件生命周期，组件通信
- 微信小程序学习笔记|4 - 微信小程序 - 自定义组件
- 笔记|微信小程序（原生）
- java|关于微信小程序与Java后台交互数据中中文乱码问题的讨论