微信小程序多层wx:for嵌套的使用

1. 首先介绍一下需求：

我们有一个对象数组list，数组成员的结构是:

{_id: '',  //主键name: '', //名称 - stringtype: 1,  //类型 - number  （范围 1 - 12）
}

我们要做的是将该数组内的成员按照其 type 属性分类列出

2. 双层wx:for 实现方案

<view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}"  wx:for-item="i"  wx:key="key"><view wx:for="{{list}}" wx:if="{{item.type == i}}" wx:key="_id" ><!--内容--></view>
</view>

解释:

wx:for : 这个不需要过多说明了吧，{{}} 内的内容当做js表达式，传入数组就换遍历它。
wx:for-item : 这个比较重要，他有默认值（默认名） item ，这个item 指的就是遍历出来的单个成员，比如第一层wx:for，我自己指定了这个item名字叫 i ，也就是说后面我们用到 i 就是第一层的成员，那为什么不叫index呢？叫i不会很low吗？是因为还有一个属性叫 wx:for-index 指定的是当前遍历到的成员索引，它的默认值（默认名）是index，也就是说会重名，在这个例子中体现的不明显，以后实际应用中会出问题。所以在第二层wx:for 中，直接使用wx:if 判断一下 item.type == i 就可以实现分类了(这里的item是第二层wx:for的成员默认名，所以item.type就是其中一个成员的属性type的值，i是第一层wx:for的成员名,i是数组中的一个数)。
wx:for-index : 上面也简单说到了这个属性，这个例子第一层循环也可以使用这一属性来实现，读者有兴趣可以自己尝试。
wx:key : 在这个例子中并不能体现出它的重要性，举一个其他的例子: 假如有一个需求，在使用wx:for 建立列表的同时，每一个item中都配有一个input输入框，我还有一个按钮，这个按钮点击后，列表再加入一个item（也有input输入框），并且每次都在列表前面加入（在原数组上使用unshift插入），不难想象，这时列表原先顺序会被打破，如果恰好某一个input框中有内容，那么这个input框并不跟随item位移(如下图)。

学过vue等框架的原理的小伙伴应该很明白这个原因，这里只简要说明它的用途不长篇大论了。如果使用了wx:key，并且指定一个 wx:key=“_id”（这里不需要加{{}}），这时每个item便有了“主键”，框架在解析的时候也就有依据。

微信小程序多层wx:for嵌套的使用相关推荐

微信小程序遍历wx:for,wx:for-item,wx:key
微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...
微信小程序 - 高级 - wx:for 与 wx:for-items 与 wx:key - 1
前言: 微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢? 1 wx:for 从目前的例子看,wx:for 的使用确实是对数组来做的 ...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档解决方法在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
微信小程序的wx:for和vue的v-for
写代码的时候,微信小程序的wx:for和vue的v-for,有点搞混了,所以特意举个简单的例子(todos)来区分下. 微信小程序 index.wxml <view class="li ...
微信小程序的wx.chooseImage如何把图片传给后端
微信小程序的wx.chooseImage如何把图片传给后端首选wx.chooseImage的用法先见官方文档 => wx.chooseImage 这个的返回值如下↓ 这里可以看到这个temp ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法遇到的问题: 第一个坑: 使用wx.chooseLocation获取地址,当输入地址时,有时候第一个搜索结果没有省市区信息 ...
微信小程序之wx.getLocation再次授权问题解决
微信小程序之wx.getLocation再次授权问题解决首先,在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) {wx.getL ...
微信小程序通过wx.redirectTo,实现单页面刷新效果＆下拉刷新页面数据效果
微信小程序通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果一: 使用 wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应 ...

微信小程序多层wx:for嵌套的使用

1. 首先介绍一下需求：

2. 双层wx:for 实现方案

微信小程序多层wx:for嵌套的使用相关推荐

最新文章

热门文章