微信小程序-WXML列表渲染

简介: 在组件上使用 wx:for 控制属性绑定一个数组/数字/字符串, 即可使用数组中各项的数据重复渲染该组件,wx:for 默认自动将当前遍历到的数据放到 item 变量中,会自动将当前遍历的索引放到index变量中,如果想修改保存数据的变量名称,或修改保存索引的变量名称,我们可以:• 使用:wx:for-item 可以指定数组当前元素的变量名;• 使用 wx:for-index 可以指定数组当前下标索引的变量名;

WXML 中的列表渲染

在组件上使用 wx:for 控制属性绑定一个数组/数字/字符串, 即可使用数组中各项的数据重复渲染该组件,wx:for 默认自动将当前遍历到的数据放到 item 变量中,会自动将当前遍历的索引放到index变量中,如果想修改保存数据的变量名称,或修改保存索引的变量名称,我们可以:

  • 使用:wx:for-item 可以指定数组当前元素的变量名;
  • 使用 wx:for-index 可以指定数组当前下标索引的变量名;


遍历数组

<view wx:for="{{ [1, 3, 5, 2, 10] }}">
  <text>{{ '索引:' + index }}</text>
  <text>{{ '值' + item }}</text>
</view>

遍历数字

<view wx:for="{{ 6 }}">
  <text>{{ '索引:' + index }}</text>
  <text>{{ '值' + item }}</text>
</view>

遍历字符串

<view wx:for="{{ 'BNTang' }}">
  <text>{{ '索引:' + index }}</text>
  <text>{{ '值' + item }}</text>
</view>

自定义保存当前遍历到数据的变量名称

<view wx:for="{{ [1, 3, 5, 2, 10] }}" wx:for-item="ch">
  <text>{{ '索引:' + index }}</text>
  <text>{{ '值' + ch }}</text>
</view>

自定义保存当前遍历到索引的变量名称

<view wx:for="{{ [1, 3, 5, 2, 10] }}" wx:for-index="idx">
  <text>{{ '索引:' + idx }}</text>
  <text>{{ '值' + item }}</text>
</view>


目录
相关文章
|
3月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
3月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
5月前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
1033 0
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
281 0
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
664 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
735 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
137 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
84 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
235 1
|
2月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
81 5