上一篇文章我们介绍了菜品分类的功能，主要是利用侧边栏组件来实现的。在点餐场景中，当我们选择一个类目时，我们希望能看到该类目下的菜品，所以在点击类目时需要与菜品列表有联动效果。这篇文章我们就来介绍如何实现菜品列表以及如何与类目联动。

1. 菜单列表功能

如果按照传统开发的话，像这样的列表功能是需要循环结构的，在低代码开发中，都是使用组件来实现的，所以选择合适的组件很重要，那么选择哪个组件来实现呢？我们的列表功能一般都是使用数据列表组件来搭建的。

打开我们的应用，在右侧的组件区找到数据列表组件，拖拽到编辑区中

不可以直接拖进编辑器，这样不会形成组件嵌套关系，需要放在哪里呢？就像积木一样，放在侧边栏的内容槽里。

数据列表会根据选择的数据源自动生成页面，生成的时候也有多种模板可以选择，这里我们选择菜品信息数据源和商品模板。

现在所有产品都已列出。我们首先想默认显示此类别。

2 为类别添加排序字段

目前左侧的分类并不是我们想要的，我们希望畅销商品排在第一位，选择侧边栏组件绑定的变量，设置排序字段，按照序号升序排序。

3 设置数据列表的过滤条件

如果在数据列表中没有设置过滤条件，就取出全部数据，这时我们需要根据菜品类别的选中值进行过滤，选中数据列表组件，点击数据过滤属性

条件：我们选择菜品类别字段

如果是关系，我们选择平等。

如果将值切换为 fx 表达式，我们将收到侧边栏选项卡的选定值

这样就实现了数据过滤

4. 实施数量选择

下单的时候一般都会有数量选择组件，点击+号加1，点击-号减1，如果没有下单就只有+号，如果减到0也只有+号，如果数量大于0就会出现减号，点击减号就会把数量减1。

这里我们先将图标修改为+号

然后我们添加一个文本组件来显示金额和一个图标来显示减号。

因为金额可能为两位数，所以我们给文本组件一个固定的宽度。选中文本组件，切换到样式，设置宽度为20px，并居中。

现在点击+和-号就不行了，我们想想这个逻辑应该怎么写，目前我们的列表是从菜品信息中读取的，但是菜品信息字段里没有购买数量字段，所以我们要主动在列表中添加这样的字段。

该字段一定不能添加到数据源中，因为这个字段只有在点菜的时候才需要，菜品展示的时候不需要，这就需要我们在查询完数据之后，在列表中添加一列。

我们需要先定义一个全局变量来更改我们的列表信息

5 全局变量定义

点击代码区域新建一个全局变量

选择新的自定义变量

输入变量名，选择类型为数组

6 购买数量初始化

刚进入小程序的时候，所有商品的购买数量应该为0，我们需要给列表的每一行数据添加一个字段，并设置默认值为0。

在代码区中创建一个新方法

当数据列表中的数据加载完成后，我们可以调用此方法，选择数据列表，并设置加载成功事件

调用我们的自定义方法

然后在自定义代码中输入以下代码

export default function({event, data}) { const list = event.detail.data console.log(list) $w.app.dataset.state.showlist_temp = list.map(item=>({...item,count:0}))}

在代码的第一行，我们定义一个常量来接收数据列表组件的返回值，该返回值是通过事件对象的数据属性获得的。

第二行我们调用数组的map方法重新构造元素，并添加字段，三个点代表对象属性的扩展，这里保留了原有对象的属性，并添加了一个新属性。

构造新列表后，我们将数据列表的循环显示重新绑定到我们的新变量

因为数量字段已经存在于新变量中，所以可以将其绑定到我们的文本字段。

$w.item_listView1.count

经过上面的步骤，我们已经设置好了点餐的初始化状态，接下来我们需要实现购物车功能，点击+号可以将菜品添加到购物车，并且可以修改购物车中的菜品数量。

总结

本文介绍了数据列表的用途、侧边栏与数据列表联动的效果，以及构建数量选择效果的过程。

一般来说，如果用组件编程的话，首先要考虑如何构造数据结构，然后如何实现算法。其实可视化编程和纯代码编程在编程形式上并没有太大的区别。如果非要说有区别的话，那就是低代码组件的效果是所见即所得，而纯代码每次都要编译一遍才能在浏览器中看到效果。