sriting的博客

sriting的博客

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

此贴为学习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:ifwx: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>

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sriting/article/details/79966242
文章标签: 微信小程序
个人分类: web前端
上一篇学习微信小程序WXML之数据绑定
下一篇学习微信小程序WXML之条件渲染
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭