目录
- [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个之多，这么多的组件，如何嵌套使用也是有一定学习成本的，照着我的教程多练习慢慢就会找到感觉。