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

相关推荐
低代码布道师13 小时前
微搭低代码实战训练营课程总结
低代码
低代码布道师13 小时前
微搭低代码实战训练营课后资料包(三)接口文档
低代码
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
速易达网络1 天前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
The_era_achievs_hero2 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app