微信小程序学习(三)——wx:for的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wild46cat/article/details/79134699

微信小程序学习(三)——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、启动页面,查看页面内容:


阅读更多

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