微信小程序中如何实现列表渲染多层嵌套循环

前言

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

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

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

讲解

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

 twoList:[{                 id:1,                 name:'应季鲜果',                count:1,                 twodata:[{                    'id':11,                    'name':'鸡脆骨'                 },{                    'id':12,                    'name':'鸡爪'                 }]         },{                 id:2,                 name:'精致糕点',                count:6,                 twodata:[{                    'id':13,                    'name':'羔羊排骨一条'                 },{                    'id':14,                    'name':'微辣'                 }]         }]

一层循环

    oneList:[{                id:1,                name:'应季鲜果',                count:1         },{                id:2,                name:'精致糕点',                count:6         },{                id:3,                name:'全球美食烘培原料',                count:12         },{                id:4,                name:'无辣不欢生猛海鲜',                count:5         }]

以上数组对象混合JSON，是测试只有一层循环的，我们看看在wxml里怎么循环，我们先看一下要循环渲染到页面上的效果图。

<view wx:for="{{oneList}}"  wx:key="id">     {{index+1}}、{{item.name}}</view>

二层循环

JSON代码

    twoList:[{                 id:1,                 name:'应季鲜果',                count:1,                 twodata:[{                    'id':11,                    'name':'鸡脆骨'                 },{                    'id':12,                    'name':'鸡爪'                 }]         },{                 id:2,                 name:'精致糕点',                count:6,                 twodata:[{                    'id':13,                    'name':'羔羊排骨一条'                 },{                    'id':14,                    'name':'微辣'                 }]         },{                 id:3,                 name:'全球美食烘培原料',                count:12,                 twodata:[{                    'id':15,                    'name':'秋刀鱼'                 },{                    'id':16,                    'name':'锡箔纸金针菇'                 }]         }]

wxml代码

    <view class="pad10" wx:for="{{twoList}}" wx:key="id">             <view>                 {{index+1}}、{{item.name}}             </view>             <view wx:for="{{item.twodata}}" wx:for-item="twodata" wx:key="id">                 ----{{twodata.name}}---{{item.name}}             </view>         </view>

以上截图和代码是二层嵌套内容。 我们在wxml代码里，很明显的看到有两个wx:for的控制属性，在二层循环的JSON代码里，我们看每个单数组里还有一级数据twodata，这里是需要再循环渲染到页面上的，在第一层数据里，直接再循环item.twodata即可，请记得一定要带上花括号。 在第二层的循环里，建议把当前项的变量名改为其他，即在wxml代码里看到的wx:for-item=”twodata”，因为默认的当前项的变量名为item，如果不改换其他的话，你是拿不到第一层循环的数据的，因为被第二层的变量名覆盖了。 所以我们在wxml代码里，在第二层循环时，可以看到还可以循环第一层的值，即—-{{twodata.name}}—{{item.name}}。

三层以上的多层循环

相关文章推荐：

微信小程序滴滴中银行卡管理模块左滑出现删除和编辑的代码实现

微信小程序--树莓派（raspberry pi）小车控制的代码流程

微信小程序API调用wx.request实现数据请求实例讲解

以上就是微信小程序中如何实现列表渲染多层嵌套循环的详细内容，更多内容请关注技术你好其它相关文章！