家政预约小程序10首先显示服务内容

目录

  • [1 完善数据源](#1 完善数据源)
  • [2 修改后台功能](#2 修改后台功能)
  • [3 吸附效果](#3 吸附效果)
  • [4 配置滚动容器](#4 配置滚动容器)
  • [5 配置顶部页签](#5 配置顶部页签)
  • [6 配置数据列表](#6 配置数据列表)
  • [7 实现吸附效果](#7 实现吸附效果)
  • 总结

上一篇我们介绍了服务内容的表设计以及搭建了后台功能,本篇我们介绍一下在首页显示服务内容。

1 完善数据源

在表设计的时候,我们把服务的价格拆分到了规格里,如果在首页上展示的时候就会涉及到表关联。

多表关联需要用到底层的语法,这样增加了复杂性,为此我们将价格放置在服务内容表里。

打开云数据库,找到我们的服务内容数据源,切换到配置模型页签,添加原价和优惠价,类型选择数字

2 修改后台功能

表里添加了字段之后,后台功能也需要同步进行更新。打开我们的后台应用,先修改列表页的表格字段

切换到编辑页,选中表单容器,勾选新添加的字段

切换到详情页,按照同样的操作,勾选新添加的字段

这就是低代码带来的好处,当你的数据模型有修改时,只需重新配置组件,一个是方便修改,另一方面效率也大大提升了

3 吸附效果

一般小程序在向下滑动到一定位置的时候顶部就会出现分类导航,我们这次设置的效果就是和通常参考的小程序一样的功能。

首先,是可以看到双列图文效果

当滑到一定的位置的时候,出现顶部页签

往回滑动的时候顶部页签消失,整体的效果仿佛顶部页签是一个吸附的效果。为了实现这个效果,需要先使用滚动容器进行布局

4 配置滚动容器

在页面的外层添加滚动容器

为了让滚动容器生效,我们需要设置滚动容器的宽度和高度,宽度设置为100%,高度设置为88vh

5 配置顶部页签

顶部页签我们可以使用顶部选项卡来搭建,昨天一个粉丝问我布局组件怎么有这么多,每一个都是干啥用的,这不就是一个示例么

添加顶部选项卡

顶部选项卡的选项通常是通过表达式进行配置的,输入如下表达式

bash 复制代码
$w.category.data.records.map(item=>({
  label:item.flmc,
  value:item._id
}))

这里我们的选项标签配置成了我们的分类名称,选项值我们配置成了数据标识

配置成这样的原因是我们在数据列表根据分类过滤的时候,因为所属分类我们设置的是关联关系,而关联关系存储的就是主表的数据标识

然后设置样式,设置为固定定位,据顶部、左边、右边都是0px,置顶

设置背景色为白色

6 配置数据列表

接着我们添加数据列表用来显示我们的双列图文效果,数据源选择服务内容

为了不让内容太拥挤,我们在数据列表外边放置一个普通容器,并且设置内边距左右各20

设置图片的高度为160

服务名称下边,我们改一下布局,添加一个普通容器,把原来的文本放入,再添加一个文本

然后设置普通容器的样式为水平排列,垂直居中

第一个文本我们绑定我们的优惠价

bash 复制代码
"¥"+$w.item_listView1.yhhjg

设置颜色为红色,字号为16,加粗

第二个文本我们绑定原价

设置样式颜色为灰色,14号

还需要一个中划线,可以让AI帮我们添加样式,点击CSS with AI,输入如下提示词,添加一个中划线

提示词会覆盖我们配置的样式,我们需要重新设置一下字号和颜色

7 实现吸附效果

为了让页面滚动到一定位置顶部选项卡可以出现,我们需要用一个变量来控制,在代码区创建一个布尔类型的变量

配置顶部选项卡的条件展示

配置滚动容器的触底触发距离

配置滚动容器的事件,触底的时候我们就把布尔值变量设置为true,触顶的时候就设置为false,来实现顶部选项卡的显示和隐藏


总结

本篇我们介绍了滚动容器、顶部选项卡、数据列表在低代码业务搭建的时候的一个具体使用。目前微搭的组件已经有75个之多,这么多的组件,如何嵌套使用也是有一定学习成本的,照着我的教程多练习慢慢就会找到感觉。

相关推荐
露临霜4 小时前
微观低代码
低代码
老华带你飞5 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽5 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域15 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往15 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw15 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld18 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
ᥬ 小月亮21 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
说私域1 天前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者82 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview