【微信开发】微信小程序多层wx:for嵌套的使用

简介: 【微信开发】微信小程序多层wx:for嵌套的使用
双层wx:for 实现方案

解释:

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位移(如下图)。

<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> 

相关文章
|
23天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
358 7
|
23天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
430 1
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
46 1
|
27天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
149 1
|
28天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
440 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
23天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
244 0
|
2月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
2月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
27天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
368 0
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
31 0
下一篇
无影云桌面