微信小程序学习（三）——wx:for的使用

微信小程序学习（三）——wx:for的使用

本文主要介绍值得绑定以及如何在界面中显示重复元素。

本文主要参考：https://www.w3cschool.cn/weixinapp/weixinapp-list.html

好，下面上货。

1、首先新建一个页面，在页面中添加如下内容：

<view class="container">
  <view wx:for="{{array}}" wx:key="index">
  {{index}}:{{item}}
  </view>
  <view>========================</view>
  <view wx:for="{{array2}}" wx:key="index">
  {{index}}:{{item.message}}
  </view>
  <view>========================</view>
  <view wx:for="{{array2}}" wx:for-index="idx" wx:for-item="itemName" wx:key="index">
    {{idx}}: {{itemName.message}}
  </view>
  <view>========================</view>
  <!--能够重复的显示block中的内容  -->
  <block wx:for="{{array2}}" wx:key="index">
    <view>this is test</view>
    <view>{{index}}:{{item.message}}</view>
  </block>
</view>

2、修改其对应的js文件

Page({
  data: {
    memo:"123",
    array: [],
    array2:[],
  },
  onLoad:function(){
    var tmparr = [1,2,3,4,5];
    var tmparr2 = [{message:"aa"},{message:"bb"}];
    this.setData({
      array:tmparr,
      array2:tmparr2,
    })
  },
  getremotedata:function(e){
    console.log("getremotedata");
  }
})

3、启动页面，查看页面内容：