点餐小程序实战教程12菜品展示

news2024/12/26 9:19:29

1 点餐界面

我们先规划一下我们的界面
在这里插入图片描述
在点餐界面我们分为左右结构，左边展示菜品的分类，右边展示菜品的列表。知道我们的布局之后就要采用合适的组件，低码中我们可以通过侧边选项卡和数据列表两个组件组合起来实现我们想要的效果

2 显示菜品分类

打开我们的应用编辑器，从右侧的组件列表里添加侧边选项卡组件
在这里插入图片描述
侧边选项卡组件有两个属性需要进行配置，分别是标签和选中标签

标签需要从我们的菜品分类表里读取数据，而选中标签，我们需要默认选中我们第一个分类

为了绑定数据先需要创建变量

2.1 创建变量

点击代码区的+号，创建变量
在这里插入图片描述
我们这里需要读取菜品分类数据源的数据，因此在创建变量的时候需要选择内置数据表查询

数据源选择我们的菜品分类，触发方式选择入参变化时自动执行，设置排序字段，按照序号升序进行排列

这里为什么要选择入参变化时自动执行呢？因为我们页面加载完毕时候就需要给用户显示有哪些分类，如果选择手动执行，那需要用户主动去点击按钮才可以加载数据，显然与我们的实际不符

为了后续程序好维护，在变量命名时候需要给一个有意义的名字
在这里插入图片描述
定义变量之后需要验证一下数据是否正常取到了，点击运行看一下结果

2.2 数据绑定

变量定义好之后，需要将数据绑定到我们的属性上，点击标签旁边的fx
在这里插入图片描述
点开之后可以看到当前组件默认的数据格式要求

[
  {
    "label": "标签1",
    "value": "1",
    "iconType": "none",
    "innerIcon": "",
    "outerImage": "",
    "iconPosition": "prefix",
    "isDisabled": false,
    "__sortid__": "IS6OxjlmWF8OTCZYlsCXA"
  },
  {
    "label": "标签2",
    "value": "2",
    "iconType": "none",
    "innerIcon": "",
    "outerImage": "",
    "iconPosition": "prefix",
    "isDisabled": false,
    "__sortid__": "n6T-otONtoe6pEaL2Q0pG"
  },
  {
    "label": "标签3",
    "value": "3",
    "iconType": "none",
    "innerIcon": "",
    "outerImage": "",
    "iconPosition": "prefix",
    "isDisabled": false,
    "__sortid__": "qX57_aW3MV46_wjLkcZVq"
  }
]

他是要求数据的格式先是一个数组，在这里中括号括起来就表示数组。里边的元素要求是对象，对象是用一对儿大括号包裹。对象里的属性要求有label、value

目前这个是一个写死的状态，和我们的变量没关联上，我们要从右侧的可绑定变量列表里选择我们刚刚定义的变量

在这里插入图片描述
要一直选到records目录才是我们需要的数组，但是目前数组里的格式和我们组件要求是不匹配的，为了让数据源的字段和组件的属性对应上，需要使用数组的map方法重新组装一下，使用如下的表达式

$w.catetoryList.data.records.map((item)=>({label:item.mc,value:item._id}))

在这里插入图片描述
菜品分类显示好后，我们还需要设置一下默认选中的标签

我们需要从当前的数组中获取第一条数据，获取数据标识

$w.catetoryList.data.records[0]._id

在这里插入图片描述

3 显示菜品

菜品分类显示后，就需要根据分类显示对应的菜品。选中侧边栏选项卡的内容插槽
在这里插入图片描述
数据源选择菜品，模板选择商品列表

设置数据列表的外边距，各设置20

目前数据列表和侧边选项卡是没有关联的，我们通过设置筛选条件来进行关联。

筛选条件设置为菜品分类等于侧边选项卡的选中标签
在这里插入图片描述

这样我们的界面展示部分就配置完毕了，点击实时预览，可以看一下最终的效果