起因:意图是想实现类似于安卓viewpager那样的效果,想到了用微信小程序的swiper组件,但如果每个swiper-item里都只用一个wx:for来渲染数据的话实在是太慢了,就想到多层嵌套数据渲染来提高效率。

直接上代码

wxml:

----{{item.name}}----

----{{two.name}}----

----{{three.name}}----

-------------------------------------------

js

one: [{

id: 1,

name:'第一层',

two: [{

'id': 11,

'name': '第二层第一个数据'

}, {

'id': 12,

'name': '第二层第二个数据'

}],

three: [{

'name': '第三层数据'

}]

},

{

id: 2,

name: '第二次渲染第一层',

two: [{

'id': 13,

'name': '第二层第一个数据2'

}, {

'id': 14,

'name': '第二层第二个数据2'

}],

three: [{

'name': '第三层数据'

}]

},

{

id: 3,

name: '第三次渲染第一层',

two: [{

'id': 15,

'name': '第二层第一个数据3'

}, {

'id': 16,

'name': '第二层第二个数据3'

}],

three: [{

'name': '第三层数据'

}]

}

]

实现效果图:

如果你想取其中一个数组的某个字段的值,可以用以下写法:

var twodata = this.data.one[0].two

var text = twodata[1].name

console.log(text)

html自定义列表第三层嵌套,【微信小程序】关于微信小程序多层嵌套渲染列表以及嵌套列表中数据的获取...相关推荐

  1. 【小破站下载工具】Python tkinter 实现网站下载工具,所有数据一键获取

    目录 前言 开发环境 本次项目案例步骤 先展示下完成品的效果 界面 导入模块 先创建个窗口 功能按键 主要功能代码编写 功能一 功能二 功能三 前言 最近很多同学想问我,怎么把几个代码的功能集合到一起 ...

  2. PHP之 “微信走步数据” ,获取并解密处理的实践操作(关键代码)

    应用场景 在微信小程序的开发中,我们经常需要从微信端获取一些处理,以方便我们的程序操作处理,如"从微信端获取走步数据","从微信端获取手机号"等,而这些数据,考 ...

  3. 微信小程序手把手教你实现带字母索引的城市选择列表

    微信小程序手把手教你实现带字母索引的城市选择列表 前言 需求分析 左边可滑动列表 滑动列表UI实现 item点击事件 右边带字母的索引条 索引条从上到下分别是定位和26个大写字母 索引条响应触摸和点击 ...

  4. 微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复)

    微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化 集成SDK 5.登录 6.会话列表 7 ...

  5. 微信小程序:微信也可以发闪照了闪照制作生成微信小程序源码下载,自定义闪照时间

    这是一款闪照制作的一款微信小程序源码 该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能 用户可以自主上传照片,可以自定义的选择闪照的时间 另外这款小程序还支持流量主模式 这种东西目前在微信还是挺 ...

  6. Android微信小尾巴,微信骚操作,微信聊天小尾巴这样自定义设置,安卓苹果都支持...

    原标题:微信骚操作,微信聊天小尾巴这样自定义设置,安卓苹果都支持 前段时间,在大家"拍一拍"玩得不亦乐乎的时候,有小伙伴问我微信聊天的小尾巴怎么实现? 当时,给我发来一张效果图,当 ...

  7. android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果

    android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果 由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...

  8. Android仿微信首页下拉显示小程序列表

    花点时间重新熟悉一下AndroidUI方面的东西,把古董PullToRefreshView又撸了一遍,技术这种东西真是忘得快啊...在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式 ...

  9. android微信下拉出现小程序,Android仿微信首页下拉显示小程序列表

    花点时间重新熟悉一下AndroidUI方面的东西,把古董PullToRefreshView又撸了一遍,技术这种东西真是忘得快啊...在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式 ...

最新文章

  1. RDKit | 基于scikit-learn将pytorch用于QSAR模型构建
  2. linux ping程序设计与实现,一步步学Linux网络编程--ping命令的实现分析
  3. [case12]演进式架构
  4. Netdata---Linux系统性能实时监控平台部署记录
  5. 华为MSTP配置教程(二)
  6. 从键盘输入一串连续的数字,判断输出是否为电话号码
  7. OpenStack Nova计算服务管理(四)
  8. MTK 驱动(58)---MTK G-sensor
  9. Vhost and VIOMMU
  10. cvsaveimage 异常_C++ IplImage*的若干bug之三:cvSaveImage問題
  11. 再看《JavaScript高级程序设计》第8-9章
  12. Coverity 配置coverity扫描python静态代码检测
  13. 【Oracle】交差并补
  14. 有效沟通bic法则_有效沟通的五个法则
  15. git提交错分支怎么办
  16. 账套恢复失败 文件服务器,用友T3恢复账套时提示:备份信息文件无效,恢复失败?...
  17. 无限火力跳跳机器人_英雄联盟无限火力小拳拳升降机蒸汽机器人
  18. HDU5619 Jam's store(最小费用最大流 MCMF)
  19. nginx-rtmp 的部署
  20. Vivado使用技巧(17):创建IBIS模型

热门文章

  1. PHP中处理函数的函数(Function Handling Functions)
  2. Go语言 - 忍不了了!!!已将Go语言各标准包文档.移到自己服务器上
  3. DELL台式机BIOS常见问题
  4. MyEclipse优化浅析
  5. 机器学习实战:TypeError: unhashable type: 'matrix'
  6. Kafka 客户端实现逻辑分析
  7. Android 创建其它应该程序的上下文对象
  8. JavaScript prototype 属性
  9. Kafka、RabbitMQ、RocketMQ等消息中间件的对比 —— 消息发送性能和区别
  10. 反思项目调试整体过程