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

1 完善数据源

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

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

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

2 修改后台功能

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

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

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

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

3 吸附效果

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

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

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

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

4 配置滚动容器

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

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

5 配置顶部页签

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

添加顶部选项卡

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

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

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

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

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

设置背景色为白色

6 配置数据列表

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

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

设置图片的高度为160

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

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

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

"¥"+$w.item_listView1.yhhjg

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

第二个文本我们绑定原价

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

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

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

7 实现吸附效果

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

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


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

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

总结

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