家政预约小程序08服务分类

目录

  • [1 创建数据源](#1 创建数据源)
  • [2 搭建后台功能](#2 搭建后台功能)
  • [3 首页显示分类](#3 首页显示分类)
  • 总结

我们用几篇的篇幅介绍了活动管理功能的开发,有了第一部分之后,在首页上需要展示家政服务的分类,本篇我们介绍一下宫格导航布局的搭建。

1 创建数据源

打开云数据库,点击+号创建数据源,输入数据源的名称服务分类

添加第一个字段,分类名称,类型选择文本

将分类名称设置为主列字段

添加第二个字段,分类图标,类型选择图片

添加第三个字段,序号,类型选择数字

2 搭建后台功能

分类数据源搭建好之后,需要在后台增加一个管理功能。打开我们的后台应用,点击创建页面的图标

选择表格与表单页,数据源选择服务分类,布局选择左侧导航布局

切换到布局设计,添加菜单,将列表页加入到菜单中

调整一下菜单的图标

回到页面设计视图,点击实时预览,我们加入必要的测试数据

现在需要设置排序规则,按照序号正序排列。选中数据表格组件,设置排序字段,选择序号,升序

设置筛选器,选择分类名称作为筛选字段

3 首页显示分类

后台功能搭建好之后,需要在首页上显示我们的分类信息。先创建一个内置数据表查询读取我们的分类信息


创建好变量后,点击运行,可以看到已经从数据源中获取了数据

在分类展示布局搭建的时候,我们主要的思路是通过循环展示来获取数据,通过循环列让我们的分类可以从左到右排列

这里注意列的设置的时候,需要设置一个固定的宽度

循环展示是从我们的变量里获取

图片和文本是从循环对象里获取对应的字段

总结

本篇我们介绍了首页分类展示的功能,包括数据源的创建、后台的搭建、页面的搭建。主要需要掌握循环展示和网格布局的灵活组合,通过组件的嵌套和变量绑定就可以实现我们需要的场景的布局效果。

相关推荐
光影少年15 分钟前
Taro 是如何解析入口配置 app.config.ts 和页面配置的?
微信小程序·小程序·typescript·reactjs·百度小程序·taro
DS小龙哥5 小时前
从呼吸心率到离床报警:60G雷达睡眠仪全栈开发实录(硬件+MQTT+小程序)DIY一台全功能睡眠监护仪
stm32·单片机·嵌入式硬件·物联网·小程序·智能家居
逆天的蝈蝈5 小时前
数据安全、信创适配与系统对接
低代码·软件开发
扶风ff8 小时前
练题簿在线免费刷题:刷题、背题、错题复习,一个小程序安排日常备考
学习·小程序
扶风ff8 小时前
练题簿在线免费刷题:共享题库、学习任务、在线考试,岗位培训更方便
学习·小程序
愚公搬代码9 小时前
【愚公系列】《微信小程序项目实战(AI编程+视频图解)》014-莫凡商城小程序项目视图容器组件的应用
微信小程序·小程序·ai编程
驰骋工作流10 小时前
驰骋BPM工作流引擎的护城河:七项能力的工程解析驰骋BPM驰骋低代码低代码工作流引擎
低代码
程xu袁1 天前
只有一段副歌,AI写歌选小程序、Suno还是海绵音乐?
小程序·suno·ai音乐·ai音乐工具·ai生成音乐·ai写歌工具
专业程序开发源1 天前
springboot生命故事书制作小程序65290-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·mysql·小程序·课程设计
QQ_21696290961 天前
基于微信小程序的智能膳食分析系统
java·大数据·spring boot·微信小程序·小程序·旅游