小程序中实现二维数组的展示

简介: 小程序中实现二维数组的展示

我们在小程序中有一类需求就是要显示二维数组,二维数组是指数组中的元素也是数组,比如我们以菜谱为例,菜谱有名称和用料,用料就又是一个数组,如果我们构造数据可以是这样

[
{name:'凉拌茄子',mix:['茄子','蒜末','小米椒','葱花']},
{name:'清炒丝瓜',mix:['丝瓜','盐','糖']}
]

定义好数据后,我们看一下低代码工具中是如何展示二维数组的

1 定义变量

我们如果要展示数据,首先要把数据存放到变量中,打开我们的控制台,创建一个空白的应用

类型选择Web端(H5/PC)

然后在应用编辑器的代码区,创建一个自定义变量

我们的变量类型选择数组,然后数据模型选择JSON,将变量名修改为menu,将我们构造好的数据粘贴到默认值里

2 外层循环

我们展示二维数组需要用到循环的嵌套,首先拖入一个循环展示组件

点击右侧循环数据的fx,我们绑定为我们创建的menu变量

文本组件自动识别到了name属性

3 内层循环

外层循环我们展示了菜谱的名称,内层循环展示一下用料,在文本组件下再放置一个循环展示组件

这个时候我们就要从外层循环的元素里找到我们的mix属性绑定到内层循环里

循环展示组件要求绑定的对象的类型为[{}]结果,数组的元素要是对象,因此我们使用数组的map方法重新包装一下

$w.item_repeater1.mix.map(item=>{return{name:item}})

为了让用料和我们的菜谱名称有一定的层级,给内层循环的文本组件设置一定的内边距

总结

二维数组展示的时候,主要是要用循环嵌套来实现,低码工具里的循环是使用组件完成的,要注意组件的层次,还有就是内层循环的时候要做一定的数据加工,只要处理好二维数组展示也比较简单,学会了照着示例练习一下吧。

相关文章
|
7月前
|
存储 算法 C语言
二维数组程序举例
二维数组程序举例
74 2
|
2月前
|
存储
如何使用指针数组来实现动态二维数组
指针数组可以用来实现动态二维数组。首先,定义一个指向指针的指针变量,并使用 `malloc` 为它分配内存,然后为每个子数组分配内存。通过这种方式,可以灵活地创建和管理不同大小的二维数组。
|
6月前
|
C语言
杨辉三角(代码直接呈现,便于理解)
杨辉三角(代码直接呈现,便于理解)
56 0
|
7月前
|
Java
杨辉三角形(二维坐标基础题)——Java-二维数组版本
杨辉三角形(二维坐标基础题)——Java-二维数组版本
53 0
|
人工智能 BI
二维数组案例
在二维数组a中选出各行最大的元素组成一个一维数组b。
67 0
|
JavaScript
js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)
js将一维数组转化为二维数组、二维数组转化为一维数组效果demo(整理)
java实现打印等腰三角形
java实现打印等腰三角形
|
Java
Java 二维数组格式、二维数组内存图解、二维数组操作
Java 二维数组格式、二维数组内存图解、二维数组操作
155 0
|
Java
通过五子棋案例,实现稀疏数组与二维数组直接互相转换。
通过五子棋案例,实现稀疏数组与二维数组直接互相转换。
105 0
通过五子棋案例,实现稀疏数组与二维数组直接互相转换。