小程序进行循环渲染
1、wx:for实现列表渲染
在组件上使用wx:for:“”控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。
例如:
Js:
Page({
data: {
array: ['第一项','第二项','第三项']
}
})
Wxml:
<view wx:for="{{array}}">
{{index}}: {{item}}
</view>
另外,使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以 指定数组当前下标的变量名:
例如:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName}}
</view>
2、block结合wx:for=“”使用
当把wx:for使用到标签上时,可以重复渲染一个包含多节点的结构块:
例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
这种使用方法类似于的wx:if结合block使用来实现条件渲染的方式
3、wx:key实现列表渲染
作用:小程序在进行列表渲染时,建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率。(提高重排效率,就地复用)
wx:key的值有两种形式提供
(1)、字符串:代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
(2)、保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序, 而不是重新创建,以确保使组件保持自身的状态。
<view wx:for="{{userlist}}" wx:key="id">
{{item.id}}:{{item.name}}
</view>
Page({
data: {
userlist:[
{id:1,name:'zhang'},
{id:2,name:'wang'},
{id:3,name:'li'}
]
}
})
注意:如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
4、注意事项
(1)、花括号和引号之间如果有空格,将最终被解析成为字符串。
(2)、当 wx:for 的值为字符串时,会将字符串解析成字符串数组。
例如:
<view wx:for="array">
{{item}}
</view>
和以下情况相同:
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbjfkc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01