【微信开发】微信小程序多层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> 

相关文章
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信食堂线上订餐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|铁路订票平台小程序的设计与实现
微信小程序|铁路订票平台小程序的设计与实现
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|音乐播放器小程序设计与实现
微信小程序|音乐播放器小程序设计与实现
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|网上花店微信小程序的设计与实现
微信小程序|网上花店微信小程序的设计与实现
|
11天前
|
小程序 前端开发 JavaScript
微信外卖小程序
微信外卖小程序
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|英语学习交流平台小程序
微信小程序|英语学习交流平台小程序
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|springboot“口腔助手”小程序的设计与实现
微信小程序|springboot“口腔助手”小程序的设计与实现
|
4天前
|
小程序 前端开发 Android开发
Android企业微信分享到小程序
Android企业微信分享到小程序
12 0
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信小程序评分小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
11天前
|
小程序 前端开发 JavaScript
微信小程序|智慧物流小程序的设计与实现
微信小程序|智慧物流小程序的设计与实现

热门文章

最新文章