当前位置: 首页 > article >正文

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

目录

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

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

1 创建数据源

打开云数据库,点击+号创建数据源,输入数据源的名称服务分类
在这里插入图片描述
在这里插入图片描述
添加第一个字段,分类名称,类型选择文本
在这里插入图片描述
将分类名称设置为主列字段
在这里插入图片描述
添加第二个字段,分类图标,类型选择图片
在这里插入图片描述
添加第三个字段,序号,类型选择数字
在这里插入图片描述

2 搭建后台功能

分类数据源搭建好之后,需要在后台增加一个管理功能。打开我们的后台应用,点击创建页面的图标
在这里插入图片描述
选择表格与表单页,数据源选择服务分类,布局选择左侧导航布局
在这里插入图片描述
切换到布局设计,添加菜单,将列表页加入到菜单中
在这里插入图片描述
调整一下菜单的图标
在这里插入图片描述
回到页面设计视图,点击实时预览,我们加入必要的测试数据
在这里插入图片描述
在这里插入图片描述
现在需要设置排序规则,按照序号正序排列。选中数据表格组件,设置排序字段,选择序号,升序
在这里插入图片描述
设置筛选器,选择分类名称作为筛选字段
在这里插入图片描述

3 首页显示分类

后台功能搭建好之后,需要在首页上显示我们的分类信息。先创建一个内置数据表查询读取我们的分类信息
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
创建好变量后,点击运行,可以看到已经从数据源中获取了数据
在这里插入图片描述
在分类展示布局搭建的时候,我们主要的思路是通过循环展示来获取数据,通过循环列让我们的分类可以从左到右排列
在这里插入图片描述
这里注意列的设置的时候,需要设置一个固定的宽度
在这里插入图片描述
循环展示是从我们的变量里获取
在这里插入图片描述
图片和文本是从循环对象里获取对应的字段
在这里插入图片描述
在这里插入图片描述

总结

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


http://www.kler.cn/a/511926.html

相关文章:

  • 【语言处理和机器学习】概述篇(基础小白入门篇)
  • KubeSphere 与 Pig 微服务平台的整合与优化:全流程容器化部署实践
  • Vue 3 自定义 Hook:实现页面数据刷新与滚动位置还原
  • Wi-Fi 7、Wi-Fi 6 与 5G、4G 的全方位对比
  • 简单介绍JSONStream的使用
  • Linux高级--3.3.1 C++ spdlog 开源异步日志方案
  • 【go语言】go的卸载与安装
  • 大模型迎来2025开年大作:deepseek-R1与deepseek-R1-Zero
  • 5G 核心网 相关概念快速入门
  • Web3 游戏周报(1.13 - 1.19)
  • 已知域名如何知道网站的ip
  • QT 占位符的用法
  • Vue3初学之Element Plus Dialog对话框,Message组件,MessageBox组件
  • 社群裂变+2+1链动新纪元:S2B2C小程序如何重塑企业客户管理版图?
  • 微软Win10 RP 19045.5435(KB5050081)预览版发布!
  • Android 11适配全攻略:从理论到实践
  • div水平垂直居中
  • 《链表之美:C语言中的灵活数据结构》
  • PostgreSql 创建稀疏索引
  • Java基础(2)
  • 语言模型的价值定位与技术突破:从信息处理到创新认知
  • 20250120 深入了解 Apache Flink 的 Checkpointing
  • Perplexity AI 周六向 TikTok 母公司字节跳动递交了一项提案
  • Linux:SystemV通信
  • 【2024 年度总结】从小白慢慢成长
  • 数据库高可用方案-04-删除策略