小程序——列表渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。


image.png

前台代码:

<!-- array 是一个数组 -->

<view wx:for="{{array}}">
{{index}}:{{item.message}}

</view>
使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

后台代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array:[{message:'First'},{message:'Name'}]
  },
block

Block的使用:

类似 block wx:if ,也可以将 wx:for 用在 <block/> 标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 所谓的列表渲染,就是对于列表数据的展示。其使用场景大多为商品列表页面、购物车页面、收藏列表等页面,应用广泛。微信小...
    beatzcs阅读 22,097评论 2 6
  • swiper组件即滑块视图容器,通常用来做轮播图。样子如下: 从官方的代码(这里我就不贴了,大家可以去查阅官方文档...
    LU7IN阅读 3,337评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,100评论 19 139
  • WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件、事件系统,可...
    许剑锋阅读 7,359评论 3 51
  • @雨田 “白雨来了”,急促的一声 翻了老汉的茶罐罐 屋外,脚步撵着脚步 婆娘跑向麦场 老汉,提着鞋子,跑向麦场 蜜...
    雨田待云阅读 309评论 2 3

友情链接更多精彩内容