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

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


<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"}
        ]
    }
})

学习微信小程序WXML之列表渲染_第1张图片

  • block标签不是组件,只是一个包装元素,在页面渲染时可以看到这个标签是不会被渲染出来的,只接受控制属性,wx:ifwx:for 等就是控制属性。如果要一次性判断或重复多个组件标签,比如对多个view组件进行同一重复动作,可以使用一个 标签将多个组件包装起来。
    学习微信小程序WXML之列表渲染_第2张图片
  • 通过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>

学习微信小程序WXML之列表渲染_第3张图片

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

学习微信小程序WXML之列表渲染_第4张图片
- 详见文档列表渲染 · 小程序。

你可能感兴趣的:(web前端,微信小程序)