微信小程序笔记-列表循环的基本要点

新手笔记，大佬如果发现有误，本人积极改正，谢谢大家了QAQ

长话短说，直入正题，小程序的列表循环和可以分成四个主要的组件

但我们要先明白一个道理：先寻找到你想要循环的目标，才能循环，找不到，程序怎么循环？

1、 wx:for="{{数组或者对象}}" \\告诉程序你要对那一个数组循环

2、wx:for-item="循环项的名称" \\告诉程序你要数组中具体的哪一个循环

3、wx:for-index="循环项的索引" \\循环时需要的编号

wx:key ="唯一的值" 用来提高列表渲染的性能

4、 wx:key="id" \\程序的动态变化的必要参数，静态时可不加，下一期我们举个例子

没看懂没关系

我举个例子：

我们把朝阳小区作为一个数组，每个住户储存在了数组里的一个个空间

朝阳小区community：[

{

门牌号num：0

住户姓名name：张三

{

门牌号：1

住户姓名：李四

{

门牌号：2

住户姓名：王二麻子

}

]

我想找住在朝阳小区的门牌号为2的王二麻子

那么：

朝阳小区是一个特殊名词，作为的是一个数组，

朝阳小区是特有的，不可能一个地方两个朝阳小区吧！

于是 wx:for="{{朝阳小区}}"

因为我要找的是王二麻子，他是一个具体的人\值

因此 wx:for-item="王二麻子"

那么我该怎么找到王二麻子呢？每个小区的门牌号码是固定的，也就是说我们可以根据门牌号去找的相应的那个人

所以 wx:for-index="门牌号为2333"

那么我将朝阳小区进行一次列表循环

<view>

门牌号：{{num}}

住户名: {{name.name}}

</view>

那么结果如下：

门牌号：0 住户名：张三

门牌号：1 住户名：李四

门牌号：2 住户名：王二麻子

//BUG说明，因为是列表循环，所以索引按0开始计算，没办法显示你设定的值

程序会将整个朝阳小区进行遍历循环

现在理解了吗？就和找人没什么区别，记住先需要找到目标，才能循环！

列表循环在日常使用中的一些注意事项：

1、wx:key="id" 绑定一个普通的字符串的时候，必须是该循环数组中的唯一属性，eg-> ID

使用场景有规律像学生的学生号，公司的员工号等

2、wx:key="*this" 表示你的数组是一个普通数组 ,*this 表示为循环项

eg: [1,5,233,611] 、["agjn","ehihn","xjvbb"]

3、当数组出现嵌套查询时， wx:for-item="item"

wx:for-index="index" 这两个绑定的名字不能一样

4、但是只有一层循环时，可以不写wx:for-item="item" ，wx:for-index="index" 这两个

微信小程序笔记-列表循环的基本要点相关推荐

微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序如何双重循环
微信小程序解决双重循环准备知识 wx:for : 使用数组中各项的数据重复渲染该组件当前项的下标变量名默认为 index,当前项的变量名默认为 item 可使用 wx:for-item 指定当前元 ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...
微信小程序关于for循环之后setData
微信小程序关于for循环之后setData Page({/*** 页面的初始数据*/data: {types: [],select: '',goods:[]},onLoad: function (op ...
微信小程序新闻列表功能（读取文件、template）
微信小程序新闻列表功能(读取文件.template) 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键 ...

微信小程序笔记-列表循环的基本要点

微信小程序笔记-列表循环的基本要点相关推荐

最新文章

热门文章