欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 蓝狐锅锅:微信小程序列表渲染多层嵌套循环及wx:key的使用

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

蓝狐锅锅:微信小程序列表渲染多层嵌套循环及wx:key的使用

发布时间:2020-12-10  
前言

入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉。

<view wx:for="{{items}}">

{{index}}: {{item.message}}

</view>

还有一个九九乘法表把数据直接写到wxml里的,并不是动态二维数组的列表渲染。

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">

<view wx:if="{{i <= j}}">

{{i}} * {{j}} = {{i * j}}

</view>

</view>

</view>

那么今天,我们主要来讲讲动态多维数组和对象混合的列表渲染。

蓝狐锅锅:微信小程序列表渲染多层嵌套循环及wx:key的使用

讲解

何为多维数组和对象混合,给个很简单的例子

twoList:[{

id:1,

name:'应季鲜果',

count:1,

twodata:[{

'id':11,

'name':'鸡脆骨'

},{

'id':12,

'name':'鸡爪'