🎥 作者简介: CSDN\阿里云\腾讯云\华为云开发社区优质创作者,专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页: 长风清留杨的博客
🍃形式准则: 无论成就大小,都保持一颗谦逊的心,尊重他人,虚心学习。
✨推荐专栏: Python入门到入魔,Mysql入门到入魔,Python入门基础大全,Flink入门到实战
🍂若缘分至此,无法再续相逢,愿你朝朝暮暮,皆有安好,晨曦微露道早安,日中炽热说午安,星河长明寄晚安🍂
WXML 模板语法
列表渲染
wx:for
在小程序开发中,WXML模板语法提供了列表渲染的功能,允许开发者通过指定的数组来动态生成一组元素。wx:for指令是实现这一功能的关键。
语法
wx:for指令的基本语法如下:
<view wx:for="{{array}}" wx:for-index="indexName" wx:for-item="itemName"><!-- 循环体内容 -->
</view>
- array:这是要遍历的数组。
- indexName(可选):这是通过wx:for-index指定的索引变量名,用于在循环体中引用当前项的索引。如果不指定,则默认使用index。
- itemName(可选):这是通过wx:for-item指定的当前项变量名,用于在循环体中引用当前项的值。如果不指定,则默认使用item。
语法
index.wxml文件
<view wx:for="{{array}}">索引是:{{index}} 当前项是:{{item}}
</view>
array是一个数组,wx:for指令会遍历这个数组,并为数组中的每一项生成一个<view>
元素。在生成的每个<view>
元素中,{{index}}会被替换为当前项的索引(从0开始),{{item}}会被替换为当前项的值。
index.js文件
Page({data: {array:['张三','男',24,'上海',178.8]},})
结果:
注意事项
- 索引和项的变量名:虽然默认情况下索引变量名为index,当前项变量名为item,但开发者可以通过wx:for-index和wx:for-item指令来自定义这些变量名。
- 数组类型:wx:for指令可以遍历普通数组、对象数组等。对于对象数组,开发者可以通过访问对象的属性来获取具体的数据。
- 性能优化:当数组较大或需要频繁更新时,使用wx:for可能会导致性能问题。此时,可以考虑使用其他优化手段,如分页加载、虚拟列表等。
应用场景
wx:for指令在小程序开发中有着广泛的应用场景,如:
- 渲染商品列表、新闻列表等动态数据。
- 生成重复的UI组件,如按钮、输入框等。
- 实现动态表单的生成和验证。
手动指定索引和当前项的变量名
在小程序开发中,WXML(WeiXin Markup Language)是类似于HTML的标记语言,用于描述小程序的结构。在列表渲染中,wx:for是一个常用的指令,它允许你遍历一个数组并生成相应的元素。默认情况下,wx:for会使用index和item作为当前项的索引和值的变量名,但你也可以手动指定这些变量名。
- wx:for:用于指定需要遍历的数组。
- wx:for-index:用于指定当前循环项的索引的变量名。这个变量名会在每次循环时被赋予一个新的值,代表当前项的索引。
- wx:for-item:用于指定当前项的变量名。这个变量名会在每次循环时被赋予数组中的当前项的值。
用法
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">索引是:{{idx}} 当前项是:{{itemName}}
</view>
- array:这是要遍历的数组。
- idx:这是通过wx:for-index指定的索引变量名,在每次循环中代表当前项的索引。
- itemName:这是通过wx:for-item指定的当前项变量名,在每次循环中代表当前项的值。
渲染结果
假设数组array的内容为['第一项', '第二项', '第三项']
,那么上述代码将渲染出以下结果:
索引是:0 当前项是:第一项
索引是:1 当前项是:第二项
索引是:2 当前项是:第三项
案例
这个案例将展示如何手动指定索引和当前项的变量名,并遍历一个简单的数组来生成一个列表。列表中的每个项将显示它的索引和值。
index.wxml文件
<!-- 假设你有一个名为items的数组,它包含了一些字符串 -->
<view class="container"><!-- 使用wx:for指令遍历items数组 --><!-- 手动指定索引变量名为idx,当前项变量名为itemValue --><block wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemValue"><!-- 创建一个view元素来显示每个项 --><view class="list-item"><!-- 显示索引 --><text>索引: {{idx}}</text><!-- 显示当前项的值 --><text>值: {{itemValue}}</text></view></block>
</view>
<view class="container">
:这是一个容器视图,用于包含整个列表。<block wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemValue">
:- wx:for=“{{items}}”:指定要遍历的数组为items。
- wx:for-index=“idx”:手动指定索引变量名为idx。
- wx:for-item=“itemValue”:手动指定当前项变量名为itemValue。
<block>
标签是一个不会渲染成任何DOM元素的容器,它只用于包裹其他元素并应用样式或逻辑。在这里,我们使用<block>
来包裹wx:for循环,因为它不会引入额外的布局开销。
<view class="list-item">
:这是一个列表项视图,用于显示每个项的索引和值。<text>索引: {{idx}}</text>
:显示当前项的索引。<text>值: {{itemValue}}</text>
:显示当前项的值。
index.js文件
Page({data: {items: ['苹果', '香蕉', '橙子'] // 示例数组}
});
结果:
wx:key的使用
在小程序开发中,当使用wx:for指令进行列表渲染时,为了提高渲染效率和性能,建议为渲染出来的列表项指定唯一的key值。这个key值类似于Vue.js中的:key属性,它可以帮助框架更高效地识别和更新列表中的元素。
为什么要使用wx:key?
- 提高渲染效率:当列表数据发生变化时,框架可以根据key值快速定位到需要更新的元素,而不是重新渲染整个列表。
- 减少不必要的操作:通过key值,框架可以避免对未改变元素的重复操作,从而提高性能。
如何使用wx:key?
1.第一步
定义数据:首先,在data对象中定义一个数组(也就是在index.js文件中),数组中的每个元素都应该有一个唯一的标识符(如id)。
data: {userList: [{ id: 1, name: '小红' },{ id: 2, name: '小黄' },{ id: 3, name: '小白' }]
}
2.第二步
在wxml模板中使用wx:for和wx:key,也就是在index.wxml文件中:
- 使用wx:for指令遍历数组。
- 使用wx:key属性指定数组中每个元素的唯一标识符的字段名。
<view wx:for="{{userList}}" wx:key="id">{{item.name}}
</view>
wx:for指令遍历userList数组,wx:key属性指定了数组中每个元素的唯一标识符为id字段。这样,当userList数组中的数据发生变化时,框架可以根据id字段快速定位到需要更新的元素。
实战案例
本案例将展示如何在小程序中使用wx:key属性来优化列表渲染。我们将定义一个包含用户信息的数组userList,并在WXML模板中使用wx:for指令遍历这个数组。同时,我们将为列表项指定唯一的key值,以提高渲染效率。
index.js文件
// data 数据
Page({data: {userList: [{ id: 1, name: '小红' },{ id: 2, name: '小黄' }, // 注意:原图片中的逗号使用了中文逗号,这里已更正为英文逗号{ id: 3, name: '小白' }]}
});
index.wxml文件
<!-- wxml 结构 -->
<view wx:for="{{userList}}" wx:key="id"><!-- 使用item变量来访问当前遍历项的数据 --><!-- 这里{{item.name}}表示访问当前项的name属性 --><text>{{item.name}}</text>
</view>
- wx:for=“{{userList}}”:这个指令表示要遍历userList数组,并为数组中的每个元素生成一个视图容器。
- wx:key=“id”:这个属性指定了数组中每个元素的唯一标识符为id字段。这样,当userList数组中的数据发生变化时(如添加、删除或更新元素),框架可以根据id字段快速定位到需要更新的元素,而不是重新渲染整个列表。
- {{item.name}}:在遍历过程中,item变量代表当前遍历到的数组元素。因此,{{item.name}}用于访问当前元素的name属性,并将其显示在视图上。
结果:
注意事项
- wx:key的值应该是绑定数据中某个属性的名称,该属性在数组中每个元素中应该是唯一的。
- 如果不指定wx:key,在某些情况下可能会导致渲染性能下降,因为框架可能需要重新渲染整个列表。
- 在选择作为wx:key的属性时,应该选择那些在整个列表中不会重复的属性,如id、唯一标识符等。