美文网首页
小程序——列表渲染

小程序——列表渲染

作者: 新海说 | 来源:发表于2018-05-19 23:29 被阅读19次

    在组件上使用 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>
    

    相关文章

      网友评论

          本文标题:小程序——列表渲染

          本文链接:https://www.haomeiwen.com/subject/zffzdftx.html