家政预约小步伐10起首显示服务内容

上一篇我们介绍了服务内容的表设计以及搭建了背景功能，本篇我们介绍一下在首页显示服务内容。
1 完善数据源

在表设计的时候，我们把服务的代价拆分到了规格里，假如在首页上展示的时候就会涉及到表关联。
多表关联需要用到底层的语法，这样增加了复杂性，为此我们将代价放置在服务内容表里。
打开云数据库，找到我们的服务内容数据源，切换到设置模子页签，添加原价和优惠价，范例选择数字

2 修改背景功能

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

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

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

这就是低代码带来的利益，当你的数据模子有修改时，只需重新设置组件，一个是方便修改，另一方面效率也大大提升了
3 吸附效果

一样平常小步伐在向下滑动到一定位置的时候顶部就会出现分类导航，我们这次设置的效果就是和通常参考的小步伐一样的功能。
起首，是可以看到双列图文效果

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

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

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

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

5 设置顶部页签

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

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

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

复制代码

这里我们的选项标签设置成了我们的分类名称，选项值我们设置成了数据标识
设置成这样的原因是我们在数据列表根据分类过滤的时候，因为所属分类我们设置的是关联关系，而关联关系存储的就是主表的数据标识
然后设置样式，设置为固定定位，据顶部、左边、右边都是0px，置顶

设置背景色为白色

6 设置数据列表

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

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

设置图片的高度为160

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

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

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

1. "¥"+$w.item_listView1.yhhjg

复制代码

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

第二个文本我们绑定原价

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

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

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

7 实现吸附效果

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

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

设置滚动容器的触底触发间隔

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

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。