微信小程序开发学习笔记——3.4for循环列表渲染的用法

>>跟着b站up主"咸虾米_"学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：https://www.bilibili.com/video/BV19G4y1K74d?p=18&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、for循环

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

二、例子1------简单数组

data.js文件的data部分：

  data: {
    name:"张三",
    age:18,
    bool:true,
    books:["孙子兵法","红楼梦","青年文摘"],
    num:6,
    user:{
      name:"高启强",
      age:50,
      gender:"男"
    }
  },

data.wxml文件中添加如下代码：

<view wx:for="{{books}}">
  书名：{{index}}-{{item}}
</view>

<view wx:for="{{books}}" wx:for-item="row" wx:for-index="idx">
  书名：{{idx}}-{{row}}
</view>

这两块代码的结果是一样的。使用 wx:for-item 可以指定数组当前元素的变量名，而默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。改成row和idx之后，{{}}花括号中的变量名也得改为row和idx。

三、 例子2------数组包含多个对象

内容从这里复制https://ku.qingnian8.com/wenzhanglist.php

data.js文件的data部分：

data: {
    article:[{
      id:1,
      title:"JS时间戳转为时间格式的多功能方法",
      time:"2023-01-10",
      picture:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200611/1591843113.jpg",
    },{
      id:2,
      title:"WXS根据时间戳计算时间间隔",
      time:"2020-04-25",
      picture:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200425/1587812172.jpg"
    },{
      id:3,
      title:"微信小程序wxs时间戳格式化多功能转换方法",
      time:"2020-03-29",
      picture:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20200329/1585485379.jpg"
    }]
  },

data.wxml文件中添加如下代码：

<view class="article" wx:for="{{article}}" wx:key="id">
  <image src="{{item.picture}}" mode=""/>
  <view class="title">
    {{item.title}}
  </view>
  <text class="time">{{item.time}}</text>
</view>