家政预约小程序07服务分类展示

news2024/11/28 1:39:11

上一篇我们开发了首页的服务展示功能，本篇我们讲解一下服务分类功能的开发。在小程序中通常在底部导航栏有一个菜单可以展示所有服务，侧边选项卡可以展示分类信息，切换分类可以显示该分类下的服务内容，效果如下：
在这里插入图片描述

1 创建服务分类页面

打开应用编辑器，点击页面创建，创建服务分类页面
在这里插入图片描述

2 侧边栏选项卡配置

从组件库添加侧边栏选项卡组件
在这里插入图片描述
左侧的分类信息需要从数据源中读取，在代码区点击新建，创建一个微搭数据表查询

选择我们的服务分类表

修改变量名为categoryList

点击fx，会显示出配置的格式

[
  {
    "label": "标签1",
    "value": "1",
    "iconType": "none",
    "innerIcon": "",
    "outerImage": "",
    "iconPosition": "prefix",
    "isDisabled": false,
    "__sortid__": "5a3FLOtq49GpHzzI5wCzb"
  }
]

这里主要需要的是两个属性一个是label，配置之后就是侧边栏选项卡的中文名称，还有就是value，这个值一般是标签被选中之后的值

在微搭中如果希望变量绑定符合组件要求的，我们通常需要重新配置一下变量的内容，这里用到了数组的map方法，map方法会迭代数组里的每一个元素，并按照我们的要求重新返回新的属性

表达式如下

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

变量绑定之后默认我们的选项卡没有被选中
在这里插入图片描述
默认选中项需要结合首页考虑，如果是从首页上点击的，那需要将首页的点击项传过来，我们选中页面组件，创建一个URL参数，输入id

然后点击选中标签的fx
在这里插入图片描述
如果传入参数有值我们就绑定传入的参数，否则我们从数组的第一个元素取值

$w.page.dataset.params.id||$w.categroyList.data.records[0]._id

3 配置数据列表

内容部分我们用数据列表进行配置，选中侧边栏选项卡的内容插槽，添加数据列表组件
在这里插入图片描述
选择模板为卡片列表，数据模型选择服务管理，为了显示多一点内容，选中列，将其调整为4，这样一行就显示了3列

修改图片的宽和高，设置为64

选中文本组件，打开溢出省略

设置第二个文本，配置为优惠价格
在这里插入图片描述
数据列表配置好之后要和我们的侧边栏选项联动，设置数据筛选

设置为服务分类等于我们侧边栏选项卡的选中标签

4 从首页跳转到分类页

首页我们现在设置了分类版块，在点击的时候需要跳转到分类页，并且选中对应的分类标签。切换到首页，找到我们的分类组件，需要重新配置一下导航的跳转信息

$w.categroyList.data.records.map((item,index)=>({
   "icon": "自定义图片",
    "iconSrc": item.fltb, "title": item.flmc, "tapStatus": "inside",insideUrl: 'u_fu_wu_fen_lei',withParams: true, 
            params: [
                {key: 'id',value: item._id}
            ]
}))