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

相关文章
ly~
|
6天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
38 6
|
6天前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
6天前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,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属性的说明
|
26天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
6天前
|
小程序
wx:for 微信小程序双重for嵌套如何获取内层的迭代对象
本文介绍了微信小程序中`wx:for`循环嵌套的使用方法,特别是如何在外层循环中访问内层循环的迭代对象。通过在外层`wx:for`中使用默认的`item`进行迭代,并在内层`wx:for`中通过`wx:for-item`属性指定迭代对象的名称,从而实现了双重`for`嵌套并获取内层迭代对象的目的。
|
6天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
小程序 前端开发 JavaScript
小程序中wx:if 和hidden的区别
在微信小程序中,wx:if和hidden都是用于控制元素显示与隐藏的方法,但它们在工作原理和性能上存在显著差异。
47 3
|
2月前
|
移动开发 小程序 前端开发
|
2月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
2月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
下一篇
无影云桌面