微信小程序 列表渲染多层嵌套循环

前言

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

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>
  • 1
  • 2
  • 3

还有一个九九乘法表把数据直接写到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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

讲解

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

 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':'微辣'
                }]
        }]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

上述例子就是一个数组,这都是我们日常开发过程中,经常会碰到的JSON格式, 
该数组的元素是有对象,对象又分为属性,属于数组对象混合,可能对于刚接触小程序的童鞋,碰到这种数组对象混合的就会发难了。

一层循环

    oneList:[{
                id:1,
                name:'应季鲜果',
                count:1
        },{
                id:2,
                name:'精致糕点',
                count:6
        },{
                id:3,
                name:'全球美食烘培原料',
                count:12
        },{
                id:4,
                name:'无辣不欢生猛海鲜',
                count:5
        }]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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

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

我们可以看到,这里直接用两个花括号来给view 循环列表,注意强调一下,请记得一下要用 两个花括号数据起来,如果不包起来,view也会循环出来,但并不是自己要循环的数据,而且是给了一个假象给你以为是有循环了,这里开发工具有点坑人的感觉,这个还需要多细心点,这里记住一点,只要是有数据的,就需要花括号。 
另外默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,同时我这里也顺道演示了如何使用数组变量名和下标。

二层循环 
这里写图片描述

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

三层以上的多层循环

三层以上的多层的数组循环,在原理上同二层循环是一样的,能理解了二层数组循环,对于三层以及三层以上都能得心应用的。 
需要注意的地方,那就是老生常谈的问题了,数据需要用花括号括起来,从第二层起,把默认的当前项的变量名改为其他,例如wx:for-item=”twodata”,还有细心再细心。

热门文章

暂无图片
编程学习 ·

springboot+idea+bootstrap的带有图片的表格编辑操作

前面已经写了 批量导入,图片显示,现在写的是批量修改,后面会写用echarts+springboot 做折线图,有时间贴上 1、jsp代码如下,编辑按钮formatter: function (value, row, index) {var edit = <input class="btn btn-primary" type="button" value=&qu…
暂无图片
编程学习 ·

05 Pandas(2)

# Author:Nimo_Dingimport pandas as pd import numpy as np from pandas import Series,DataFrame# 数据表的合并 df1=DataFrame({name:[ZhangFei,GuanYu,a,b,c],data1:range(5) }) df2=DataFrame({name:[ZhangFei,GuanYu,A,B,c],data2:range(5) }) print(\n1、基于指定列进行…
暂无图片
编程学习 ·

应用10秒部署、成本降低50% 阿里云serverless容器改写云计算极限

在将应用部署时间从以天计缩短到以小时计后,云计算正进入秒计时代:阿里云推出的最新计算形态Serverless容器服务改写了云计算极限,单实例启动时间为创世界纪录的10秒,1分钟可弹出1000实例,这使按需按秒计费成为现实,在云计算大大降低计算成本的基础上,让总计算成本再次降…
暂无图片
编程学习 ·

钉钉dd.ready中不能调用方法解决,钉钉微应用遇到的坑

钉钉dd.ready中不能调用方法解决获取微应用免登授权码官方代码:dd.ready(function() {dd.runtime.permission.requestAuthCode({corpId: _config.corpId, // 企业idonSuccess: function (info) {code = info.code // 通过该免登授权码可以获取用户身份}}); });code虽然拿到了,…
暂无图片
编程学习 ·

Node.js 工具模块(笔记整理)

目录util模块util.inspectisArray和isRegExpinheritsos 模块path 模块Net 模块net.Server事件net.Socket属性Socket方法DNS模块util模块util.inspectutil.inspect(object,[showHidden],[depth],[colors]) 将任意对象转换为字符串的方法,通常用于调试和错误输出。至少接受…
暂无图片
编程学习 ·

Java中Date类型数据格式转换

查询数据库datetime类型数据,返回的结果是Mon Jun 22 19:37:29 CST 2020 先转换成yyyy-MM-dd类型的格式。 /** * 获取现在时间 * * @return 返回短时间字符串格式yyyy-MM-dd */ public static String getStringDateShort() { Date currentTime = new Date(); SimpleDateF…
暂无图片
编程学习 ·

vue前端代码优化-1

也许有人会感觉CR没有什么卵用,只要我代码实现了功能,我完成了开发任务,我就OK了,为啥还要CR??但是CR真的是有必要的,你不仅可以发现自己代码中的不足之处,待优化点,简洁明了的代码易读别人接手也会很快。1. 比如在vue项目中只有某一个组件用某一个特别长的常量对象,…
暂无图片
编程学习 ·

数据库---常用数据库的驱动程序

Oracle数据库 驱动程序包名:ojdbc6.jar 驱动类的名字:oracle.jdbc.driver.OracleDriverJDBC URL:jdbc:oracle:thin: @dpip:port: databasename 说明:驱动程序包名有可能会变 JDBC URL中各个部分含义如下: dbip –为数据库服务器的IP地址,如果是本地可写:localhost或127.…
暂无图片
编程学习 ·

extern随笔

extern的用法总结函数声明是可有可无的,因为函数不加修饰符默认是extern的; 全局变量在其他文件中使用时,extern关键词是必须的,如果变量在其他文件中没有extern且没有显示的初始化,则会被当成变量的定义。局部变量是不需要extern关键字描述的,而且局部变量在程序运行时才…
暂无图片
编程学习 ·

Java中的递归

Java中的递归(涉及到面试)举个例子: package com.wang.digui; /* 递归*/ public class Demo {public static void main(String[] args) {int calcetor = calcetor(3);System.out.println(calcetor);}//算阶乘的public static int calcetor(int n){if (n == 1){return 1;}els…
暂无图片
编程学习 ·

自学Django之路---Day4.View,路由规则,反向解析

知识点:locals()可以将局部变量以字典的方式打包点语法 "."访问属性,之前已经多次用到了: {% for student in students %}<li>{{ student.s_name }}</li>{% endfor %}"."访问方法: 在Student类中定义一个方法: class Student(models.Model…
暂无图片
编程学习 ·

前端未来技术走向(TS, SSR, serverless, flutter,多端统一开发)

TS TS为什么会出现? 1.js是一门弱类型而且还是动态类型的语言,语言本身的类型系统是非常薄弱的,当js去开发大型的前端项目,开发成本和维护成本都会非常的高2.而ts是一门基于js基础之上的编程语言,它在javascript原有的基础之上多了一些扩展特性,主要就是一套更强大的类型…
暂无图片
编程学习 ·

Go 结构体内存分配机制

结构体内存分配机制我们定义一个Person结构体(包括名字,年龄)我们看看下面一段代码,输出什么内容?var p1 Person p1.Name = "小明" var p2 Person = p1 fmt.Printin(p2.Age)p2.Name = "tom" fmt.Printf("p2.Name=%v p1.Name=%v",p2.Name,…
暂无图片
编程学习 ·

百度百科创建好像成功不了,BBdoc文档搜索词条都四个版本了无法成功!

看来想创建成功百度百科几乎是不太可能,不知道啥原因?本来想通过百度百科让更多人了解到BBdoc文档搜索工具,可以早日使用上,但就是无法成功。BBdoc文档搜索官网:http://www.bbdoc.cn/版本1提示错误:版本2提示错误:版本3提示错误:版本4提示错误:不想有版本5了,快崩溃哪…
暂无图片
编程学习 ·

美团点评旅游搜索召回策略的演进

本文内容与6月22日第22期美团点评技术沙龙“美团点评AI实践”主题演讲一致,欢迎大家去现场和作者交流。关注“美团点评技术团队”微信公众号,第一时间获取沙龙最新信息,还可以查阅往期沙龙PPT/视频。美团点评作为最大的生活服务平台,有丰富的品类可供用户选择,因此搜索这个…
暂无图片
编程学习 ·

Transformer

Transformer是谷歌大脑在2017年底发表的论文attention is all you need中所提出的seq2seq模型。现在已经取得了大范围的应用和扩展,而BERT就是从Transformer中衍生出来的预训练语言模型 这篇文章分为以下几个部分Transformer直观认识 Positional Encoding Self Attention Mech…
暂无图片
编程学习 ·

程序人生 - 西瓜霜能吃下去吗?

西瓜霜是可以吃下去的,但是会影响到临床的药效,临床常用的有西瓜霜和西瓜霜润喉片主要药理作用就是消肿止痛,清咽利嗓,多用于急慢性咽喉炎,扁桃体炎,口腔溃疡,口舌生疮等引起的咽喉疼痛,声音嘶哑,牙龈红肿。通常,主要是局部用药,这样才能够更好的发挥疗效,成年人一…
暂无图片
编程学习 ·

HTTP协议

HTTP入门1.为什么要学HTTP?我们绝大多数的web应用都是基于http来进行开发的,我们对web的操作都是通过http协议进行传输数据的;简单来说,http协议就是客户端和服务器交互的 一种通讯格式。Http的诞生主要是为了能够文档之间相互关联,形成超文本可以互相传阅,可以说http就是…