网站建设报价模板,wordpress 视频站模板下载,森东网站建设,手机网站素材小程序一般底部菜单栏会有一个分类的功能#xff0c;点击分类#xff0c;以侧边栏导航的形式列出所有类目#xff0c;点击某个类目可以做数据筛选#xff0c;我们本篇就实现一下该功能 01 优化数据源
在我们家政服务小程序里#xff0c;我们已经建立了类型和服务的数据源…小程序一般底部菜单栏会有一个分类的功能点击分类以侧边栏导航的形式列出所有类目点击某个类目可以做数据筛选我们本篇就实现一下该功能 01 优化数据源
在我们家政服务小程序里我们已经建立了类型和服务的数据源。如果表和表之间没有联系我们一般把这类型的表叫做单表。单表在我们业务开发里是简单业务无论是开发增删改查还是做查询统计都比较简单。
另外一种关系就是多表的关系比如我们的类型和服务数据源就是多表的关系。一个类型下有多项服务一项服务属于某个类型。
表达这种表之间关系的我们在微搭中使用关联关系这种字段类型。登录微搭的控制台找到服务数据源添加类型字段字段类型选择关联关系 注意要选对关联类型我们这里多个内容属于一个分类如果是多对多的关系那需要将数据源拆分为两个一对多的关系
还有就是删除行为我们选择如果存在内容和分类有关联时就不允许直接删除分类
02 修改测试数据
我们点击列表上的管理数据修改一下已经添加好的数据增加分类内容 选择了之后服务分类是一串数字和字符这是因为现在分类的主列字段是数据标识我们更改一下主列字段改为分类名称 修改后我们的分类信息就可以正常显示了 03 搭建页面
首先创建一个分类的页面 添加侧边选项卡组件 定义一个变量从数据源中读取分类信息 将侧边选项卡的标签列表清空关闭启用多个插槽选项 点击数据绑定图标使用表达式绑定输入如下表达式
$page.dataset.state.category.records选择对应的标签名称和标签值 在内容插槽里添加数据列表组件选择服务内容数据源模板选择图文卡片 选中文本组件将文本内容修改为价格 修改一下文本的样式设置颜色为红色 数据列表我们需要增加一个筛选条件让服务展示的时候根据分类来做过滤定义一个变量 设置筛选条件让分类id等于我们的变量 然后给侧边选项卡组件设置事件我们让类别切换时将选中的值赋值给变量即可 这样页面的功能就开发好了
总结
我们本篇开发了分类功能切换分类的时候自动展示该分类下的服务内容。可以看到我们只是使用了基础组件使用了侧边选项卡和数据列表组件配置了属性及事件就完成了开发这也就是低码开发最大的特点无需编程只需要拖拽组件即可。
