微信小程序开发学习笔记——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部分:

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

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

html 复制代码
<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部分:

javascript 复制代码
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文件中添加如下代码:

html 复制代码
<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>
相关推荐
charlie1145141913 小时前
从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架(协议层封装)
c语言·驱动开发·单片机·学习·教程·oled
马船长4 小时前
[BSidesCF 2020]Had a bad day1
学习
黄交大彭于晏4 小时前
三端回链增加截图功能
学习
计算机-秋大田4 小时前
基于微信小程序的电子竞技信息交流平台设计与实现(LW+源码+讲解)
spring boot·后端·微信小程序·小程序·课程设计
linwq85 小时前
设计模式学习(二)
java·学习·设计模式
Fhd-学习笔记5 小时前
《大语言模型》综述学习笔记
笔记·学习·语言模型
简知圈7 小时前
【04-自己画P封装,并添加已有3D封装】
笔记·stm32·单片机·学习·pcb工艺
YxVoyager7 小时前
GAMES101学习笔记(五):Texture 纹理(纹理映射、重心坐标、纹理贴图)
笔记·学习·图形渲染
徐某人..7 小时前
ARM嵌入式学习--第十天(UART)
arm开发·单片机·学习·arm
Buring_learn7 小时前
代理模式 -- 学习笔记
笔记·学习·代理模式