目录
- [1 创建页面](#1 创建页面)
- [2 配置导航菜单](#2 配置导航菜单)
- [3 配置侧边栏选项卡](#3 配置侧边栏选项卡)
- [4 配置数据列表](#4 配置数据列表)
- [5 首页和分类页联动](#5 首页和分类页联动)
- 总结
我们现在在首页开发了列表显示服务信息的功能，在点击导航菜单的时候，需要自动跳转到对应的分类，本篇我们介绍一下使用侧边栏选项卡实现分类显示的功能。
1 创建页面
打开我们的小程序，点击创建页面的图标
选择空白页，因为我们的服务分类是导航页面，所以布局需要选择Tab栏导航布局
2 配置导航菜单
Tab栏导航菜单除了首页外，还需要一个分类的菜单，这个分类指向我们新创建的页面。点击布局设计的图标
切换到Tab栏导航布局，选中Tab栏，修改一下标签2
改成分类，页面选择我们刚刚创建的服务分类
3 配置侧边栏选项卡
回到页面设计，删除自动添加的网格布局组件，添加侧边栏选项卡
侧边栏的选项内容我们需要从我们的分类表里读取，因此需要创建一个变量。点击点击新建
选择新建内置表查询
数据表选择服务分类，触发方式选择入参变化时自动执行
设置好变量之后，点击标签的fx
输入表达式绑定具体的内容
bash
$w.category.data.records.map(item=>({label:item.flmc,value:item._id}))
配置默认选中的fx，输入如下表达式
bash
$w.category.data.records[0]._id4 配置数据列表
在侧边栏选项卡的内容插槽里添加数据列表组件，数据模型选择服务内容，模板选择卡片列表
设置数据列表的外边距，各为10
配置数据列表的数据筛选，设置条件为所属分类等于我们侧边栏选项卡的选中标签
这样配置了之后，当切换选项卡的时候我们列表的值也会跟着改变
5 首页和分类页联动
当我们点击首页的分类导航时候，会跳转到分类页面，这个时候在首页上点击的分类要被选中。这种需求我们可以设置一个URL参数，选中页面组件，添加URL参数
然后修改一下侧边栏选项卡的默认选中标签，将我们的URL参数添加到表达式中
bash
$w.page.dataset.params.categoryid||$w.category.data.records[0]._id表达式我们使用了短路运算符，或，如果我们的URL参数没有值，我们还是设置为第一个分类作为选中
回到首页，给我们的分类导航组件配置点击事件
选择打开页面
选择分类页面，参数绑定从我们的循环对象绑定为_id
bash
$w.item_repeater1._id这样就实现了联动的效果
总结
本篇我们介绍了侧边栏选项卡以及数据列表的联动配置，接着介绍了首页和分类页的联动配置。在小程序中这种页面直接传参的需求还是非常常见的，主要需要掌握URL参数的设置以及如何传参，掌握了基本用法其实很多常见的功能就很容易实现。