学习微信小程序WXML之列表渲染

最新推荐文章于 2025-10-30 22:28:59 发布

原创最新推荐文章于 2025-10-30 22:28:59 发布 · 1.4w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

web前端专栏收录该内容

12 篇文章

订阅专栏

这篇博客是学习微信小程序开发的笔记，重点讲解了WXML中的列表渲染。介绍了如何使用<block>标签包裹多个组件，以及通过wx:for指令结合index和item变量实现数组遍历渲染。同时提到了当列表项需要保持状态时，应使用wx:key指定唯一标识符。示例中展示了九九乘法表的渲染方法。

此贴为学习9 小时搞定微信小程序开发的笔记
文档列表渲染 · 小程序

<!-- index.wxml-->
<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
        <view>{{index}}:{{item.name}}</view>
    </block>
</view>

//index.js
Page({
    data:{
        items:[
            { name:"商品A"},
            { name:"商品B"},
            { name:"商品C"},
            { name:"商品D"},
            { name:"商品A"}
        ]
    }
})

这里写图片描述

block标签不是组件，只是一个包装元素，在页面渲染时可以看到这个标签是不会被渲染出来的，只接受控制属性，wx:if 和 wx:for 等就是控制属性。如果要一次性判断或重复多个组件标签，比如对多个view组件进行同一重复动作，可以使用一个 <block/> 标签将多个组件包装起来。
通过wx:for来绑定名为items的数组。效果相当于for循环，重复渲染该组件。也可以嵌套，下边是一个九九乘法表。

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

这里写图片描述

index变量是当前元素在数组里的下标，也可以通过wx:for-index来指定数组当前下标的变量名。使用 wx:for-item 可以指定数组当前元素的变量名。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
block wx:for 类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

这里写图片描述
- 详见文档列表渲染 · 小程序。