家政预约小程序11分类展示

目录

• [1 创建页面](#1 创建页面)
• [2 配置导航菜单](#2 配置导航菜单)
• [3 配置侧边栏选项卡](#3 配置侧边栏选项卡)
• [4 配置数据列表](#4 配置数据列表)
• [5 首页和分类页联动](#5 首页和分类页联动)
• 总结

我们现在在首页开发了列表显示服务信息的功能，在点击导航菜单的时候，需要自动跳转到对应的分类，本篇我们介绍一下使用侧边栏选项卡实现分类显示的功能。

1 创建页面

打开我们的小程序，点击创建页面的图标

选择空白页，因为我们的服务分类是导航页面，所以布局需要选择Tab栏导航布局

2 配置导航菜单

Tab栏导航菜单除了首页外，还需要一个分类的菜单，这个分类指向我们新创建的页面。点击布局设计的图标

切换到Tab栏导航布局，选中Tab栏，修改一下标签2

改成分类，页面选择我们刚刚创建的服务分类

3 配置侧边栏选项卡

回到页面设计，删除自动添加的网格布局组件，添加侧边栏选项卡

侧边栏的选项内容我们需要从我们的分类表里读取，因此需要创建一个变量。点击点击新建

选择新建内置表查询

数据表选择服务分类，触发方式选择入参变化时自动执行

设置好变量之后，点击标签的fx

输入表达式绑定具体的内容

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

配置默认选中的fx，输入如下表达式

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

4 配置数据列表

在侧边栏选项卡的内容插槽里添加数据列表组件，数据模型选择服务内容，模板选择卡片列表

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

配置数据列表的数据筛选，设置条件为所属分类等于我们侧边栏选项卡的选中标签

这样配置了之后，当切换选项卡的时候我们列表的值也会跟着改变

5 首页和分类页联动

当我们点击首页的分类导航时候，会跳转到分类页面，这个时候在首页上点击的分类要被选中。这种需求我们可以设置一个URL参数，选中页面组件，添加URL参数

然后修改一下侧边栏选项卡的默认选中标签，将我们的URL参数添加到表达式中

$w.page.dataset.params.categoryid||$w.category.data.records[0]._id

表达式我们使用了短路运算符，或，如果我们的URL参数没有值，我们还是设置为第一个分类作为选中

回到首页，给我们的分类导航组件配置点击事件

选择打开页面

选择分类页面，参数绑定从我们的循环对象绑定为_id

$w.item_repeater1._id

这样就实现了联动的效果

总结

本篇我们介绍了侧边栏选项卡以及数据列表的联动配置，接着介绍了首页和分类页的联动配置。在小程序中这种页面直接传参的需求还是非常常见的，主要需要掌握URL参数的设置以及如何传参，掌握了基本用法其实很多常见的功能就很容易实现。