家政预约小程序03分类管理

目录

  • [1 创建数据源](#1 创建数据源)
  • [2 搭建导航菜单](#2 搭建导航菜单)
  • [3 搭建小程序](#3 搭建小程序)
  • [4 设置变量](#4 设置变量)
  • [5 变量绑定](#5 变量绑定)
  • 总结

家政预约小程序里,在首页需要展示家政可以开展的各类业务。我们把业务按照类别进行划分,本篇我们介绍一下管理后台的维护功能以及小程序的展示功能。

1 创建数据源

为了管理和展示分类信息,我们先需要创建数据源用来保存信息。打开控制台,点击数据模型,点击新建

输入数据源的名称,家政预约分类信息

点击添加一列,输入分类名称,类型选择文本

在分类名称上点击向右插入列

输入分类图标,类型选择图片

输入排序,类型选择数字

列添加完了之后我们添加行,分别将数据录入好

2 搭建导航菜单

数据准备好之后,就需要搭建导航菜单了,打开我们的管理后台,添加一个页面,我们从模板进行新建,选择表格与表单页,选择我们刚刚创建的数据模型

模板自动帮我们生成了列表、编辑、详情页

切换到页面布局,将我们的列表页添加到菜单上

在切换页面设计中,我们的分类管理菜单就显示了出来

如果只是简单的增删改查,直接用模板生成即可

3 搭建小程序

后台管理功能开发好了之后,就需要设置小程序的首页功能。在首页我们通常会将图标和文字以一个行列布局的形式做展示。在微搭中有这种需求的,可以直接使用宫格导航组件进行搭建。

打开小程序,添加一个普通容器,设置底部的内边距为85

设置内边距的原因是因为我们需要给底部的tab栏留出空间,要不内容比较多的时候会被底部的tab栏遮挡住

然后在普通容器里添加宫格导航组件

4 设置变量

因为我们的分类信息已经存储在数据源中,需要从数据源提取出来,需要新建一个变量来读取信息

在代码区点击新建,选择数据表查询

数据表选择我们刚刚创建的,触发方式选择入参变化时自动执行

设置排序方式,按照我们在数据源中设置的排序字段进行排序

设置完毕后点击保存按钮,修改一下变量的名称

点击运行确认一下是否可以正确查询出数据来

5 变量绑定

变量定义没有问题之后,我们就可以进行绑定了,选中宫格导航,点击导航设置的fx绑定

输入如下的表达式

bash 复制代码
$w.categroyList.data.records.map((item,index)=>({
   "icon": "自定义图片",
    "iconSrc": item.fltb, "title": item.flmc, "tapStatus": "tap"
}))

绑定完成后就可以正常显示出图标来

当然了,我们还可以设置的更复杂一点,比如点击图标的时候切换到类别选择页面,而且被点击的类别被选中,在后续的页面我们结合分类选择页面进行设置

总结

本篇我们讲解了分类管理的后台设置以及小程序端展示的功能,总体的步骤是设置数据源,通过模板生成页面,然后选择合适的组件进行属性设置即可。

相关推荐
明月(Alioo)26 分钟前
用AI帮忙,开发刷题小程序:微信小程序中实现Markdown图片解析与渲染功能详解
微信小程序·小程序·aigc
大模型真好玩2 小时前
低代码Agent开发框架使用指南(一)—主流开发框架对比介绍
人工智能·低代码·agent
说私域5 小时前
技术指数变革下的组织适应性研究:基于定制开发开源AI智能名片S2B2C商城小程序的实践观察
人工智能·小程序·开源
sheji34166 小时前
【开题答辩全过程】以 《基于小程序的校内快递代取服务平台的设计与实现》为例,包含答辩的问题和答案
小程序
canonical_entropy1 天前
DDD本质论:从哲学到数学,再到工程实践的完整指南之理论篇
后端·低代码·领域驱动设计
说私域1 天前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源
2501_915106321 天前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
云起SAAS2 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
LoveEate2 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
韩立学长2 天前
【开题答辩实录分享】以《基于微信小程序的糖尿病居家健康管理系统》为例进行答辩实录分享
微信小程序·小程序