开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
native 渲染
性能与优化
小程序全局配置
小程序页面
axml
sjs 语法参考
事件系统
自定义组件
基础能力
基础库
基础库更新日志
开发 > 框架 >  > 列表渲染
贡献者
收藏
订阅更新
我的文档
设置
a:for
在组件上使用 a:for 属性可以绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 数组当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
html
复制代码
<view a:for="{{array}}">
{{index}}: {{item.message}}
view>
javascript
复制代码
page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar',
}],
},
});
使用 a:for-item 可以指定数组当前元素的变量名。使用 a:for-index 可以指定数组当前下标的变量名。
html
复制代码
<view a:for="{{array}}" a:for-index="idx" a:for-item="itemname">
{{idx}}: {{itemname.message}}
view>
a:for 支持嵌套。 以下是九九乘法表的嵌套示例代码。
html
复制代码
<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="i">
<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="j">
<view a:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
view>
view>
view>
block a:for
block a:if 类似,可以将 a:for 用在 标签上,以渲染一个包含多节点的结构块。
a:key
如果列表项位置会动态改变或者有新项目添加到列表中,同时希望列表项保持特征和状态(例如 中的输入内容, 的选中状态),需要使用 a:key 来指定列表项的唯一标识。 a:key 的值以两种形式来提供:
字符串:代表列表项某个属性,属性值需要是列表中唯一的字符串或数字,例如 id,并且不能动态改变。
保留关键字 *this,代表列表项本身,并且它是唯一的字符串或者数字,例如当数据改变触发重新渲染时,会校正带有 key 的组件,框架会确保数据重新被排序,而不是重新创建,这可以使组件保持自身状态,提高列表渲染效率。
注意
如不提供 a:key,则会提示 warning。
如果明确知道列表是静态,或者不用关注其顺序,则可以忽略。
下面是示例代码:
key
key 是比 a:key 更通用的写法,里面可以填充任意表达式和字符串。 注意: key 不能设置在 block 上。 下面是示例代码:
相关文档
数据绑定
条件渲染
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图