门户网站 集成 移动app 方案,wordpress 手机登录,网站优化目录,百度引流免费推广怎么做目录 1 修改数据源2 创建页面3 搭建轮播图4 搭建基本信息5 显示服务规格6 搭建服务描述7 设置过滤条件总结 我们已经在首页、分类页面显示了服务的列表信息#xff0c;当点击服务的内容时候需要显示服务的详情信息#xff0c;本篇介绍一下详情页功能的搭建。 1 修改数据源
在… 目录 1 修改数据源2 创建页面3 搭建轮播图4 搭建基本信息5 显示服务规格6 搭建服务描述7 设置过滤条件总结 我们已经在首页、分类页面显示了服务的列表信息当点击服务的内容时候需要显示服务的详情信息本篇介绍一下详情页功能的搭建。 1 修改数据源
在服务详情展示的时候我们顶部需要有一个轮播图的效果为此我们需要修改一下数据源增加一个轮播图的字段类型选择数组元素选择图片 还需要记录一下销量增加一个销量字段类型选择数字
2 创建页面
数据源修改好之后需要创建一个详情页点击创建页面的图标增加详情页
3 搭建轮播图
创建好页面之后先搭建第一部分轮播图。轮播图要从数据源读取刚刚创建的轮播图字段先使用数据详情组件读取数据源的数据往页面中添加数据详情组件数据模型选择服务内容 在数据详情组件下添加轮播容器组件 选中轮播容器的第一个图片点击fx进行数据绑定 绑定我们轮播图的第一张图片表达式如下
$w.dataView1.record?.lbt[0]绑定第二张图片我们的下标设置为1 绑定第三张图片下标设置为2
4 搭建基本信息
轮播图搭建好了之后就需要显示服务的基本信息基本信息包括价格、销量、名称。先添加一个普通容器里边设置两个普通容器用来显示价格和销量 给外层的普通容器设置样式布局设置为横向排列两端对齐 内层的普通容器第一个普通容器设置为横向排列左对齐、下对齐 第一个文本设置内容为预估到手价颜色设置为橙色 第二个文本绑定为优惠价 第三个文本绑定为原价要有一个中划线的效果
:root {font-size: 14px;color: rgb(126, 130, 142);text-decoration: line-through;
}第四个文本绑定销量 继续添加普通容器里边添加文本组件用来显示服务名称 设置文本组件的文本内容为服务名称
5 显示服务规格
继续添加普通容器里边添加标签选择用来显示服务规格 关闭标题显示 设置选项及默认选中 选项的表达式绑定
$w.dataView1.record.fwgggl.map(item({label:item.ggmc,value:item._id
}))默认选中的表达式绑定
$w.dataView1.record.fwgggl[0]._id绑定之后你会发现数据显示不出来。这是因为数据详情默认是读取的本表字段不会去关联查询子表数据我们要修改成读取全部字段 为了有一个对比我们设置页面组件的背景色为灰色 将内容部分的普通容器的背景色设置为白色 通过设置外边距来显示出一定的背景色
6 搭建服务描述
添加普通容器里边添加一个文本用来显示标题一个富文本用来显示服务描述 文本我们直接设置文本内容为服务详情居中 富文本绑定对应的字段
7 设置过滤条件
详情页需要知道显示哪一条数据为此需要设置URL参数选择页面组件添加URL参数设置为serviceid 选择数据详情组件设置数据筛选 筛选条件设置为数据标识等于我们的URL参数 回到首页给服务内容添加点击事件设置为打开详情页传入我们的数据标识 这样详情页就配置好了
总结
本篇我们介绍了服务详情的搭建过程讲解了数据详情、基础的布局搭建以及标签选择组件的配置。布局的搭建过程主要是要清晰自己想要什么样的效果用什么样的布局组件可以实现对应的效果。
低代码搭建就是基于现有组件搭建在让UI配图的时候也不能乱发挥软件开发不是自由在画布上画画还是需要基于现有的技术来进行创作。
