家政预约小程序08服务详情

news2024/11/9 2:00:31

目录

  • 1 创建页面
  • 2 创建URL参数
  • 3 配置数据详情组件
  • 4 从分类页跳转到详情页
  • 5 搭建详情页
  • 总结

现在我们的小程序已经在首页和分类页展示了服务的列表信息,当用户点击具体的内容的时候需要打开详情页,本篇介绍一下详情页的开发。

1 创建页面

打开应用编辑器,点击创建页面图标,输入服务详情页
在这里插入图片描述
在这里插入图片描述

2 创建URL参数

从列表页跳转到详情页的时候,需要将当前数据的数据标识传入,在详情页需要接收。在微搭里页面之间参数传递是通过URL参数来完成的。

选中页面组件,在右侧的属性区,点击新建URL参数,输入id
在这里插入图片描述
在这里插入图片描述

3 配置数据详情组件

在详情页搭建的时候,需要根据传入的数据标识查询数据并进行展示。像这类需求我们可以使用数据详情组件,从组件列表里找到数据详情组件,拖入页面编辑区
在这里插入图片描述
数据详情需要设置数据标识,选中我们的服务管理数据源,然后设置数据筛选,让数据标识等于我们的URL参数
在这里插入图片描述

4 从分类页跳转到详情页

分类页跳转详情页时需要传入数据标识,切换到分类页,设置点击事件,动作选择打开页面,传入我们的数据标识
在这里插入图片描述

5 搭建详情页

跳转逻辑和数据过滤都设置好之后,就可以开发我们的详情页了。切换到详情页,将数据详情组件下的内容删除
在这里插入图片描述
添加一个普通容器,设置背景色为灰色
在这里插入图片描述
普通容器下添加一个图片组件,用来显示我们服务的图片信息
在这里插入图片描述
设置图片的布局模式为裁剪填满,宽100%,高220px
在这里插入图片描述
在这里插入图片描述
添加一个按钮组件,内容修改为分享,图标选择share-1
在这里插入图片描述
设置定位为绝对定位,距上边180px,距右边10px
在这里插入图片描述
下边继续添加普通容器
在这里插入图片描述
然后按照我们的构思,设置普通容器的布局,实现我们优惠价格、划线价格、销量的一行展示
在这里插入图片描述
继续添加文本组件,绑定内容为服务名称
在这里插入图片描述
第三行绑定服务描述
在这里插入图片描述
第四行我们用图标和文字搭建一些宣传语
在这里插入图片描述
第一个版面做完之后,我们继续添加一个关注公众号的组件
在这里插入图片描述
第三个版面我们放置购买须知,布局可以参考第一个版面的设置过程
在这里插入图片描述
最后放置详情介绍,使用富文本展示组件
在这里插入图片描述
最后放置一个底部的操作区,方便用户下单
在这里插入图片描述

总结

本篇我们介绍了详情页面的开发过程,演示了页面之间跳转与传参,使用普通容器搭建自己想要的布局。在这种相对复杂一点的页面,用好普通容器是布局搭建的基本要求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1714613.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【第7章】SpringBoot整合Mybatis-Plus

文章目录 前言一、引入库二、案例1.UserMapper2.UserController3. 结果 三、配置总结 前言 MyBatis-Plus 是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。 上一篇内容已经整合过Mybatis,这里在…

拼接字符串

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 使用“”运算符可完成对多个字符串的拼接,“”运算符可以连接多个字符串并产生一个字符串对象。 例如,定义两个字符串&#…

05-28 周二 TTFT, ITL, TGS 计算过程以及LLama2推理代码调试过程

05-28 周二 LLama2推理代码调试过程 时间版本修改人描述2024年5月28日15:03:49V0.1宋全恒新建文档 简介 本文主要用于求解大模型推理过程中的几个指标: 主要是TTFT,ITL, TGS 代码片段 import osdata_dir "/workspace/models/" m…

【2024最新华为OD-C卷试题汇总】披萨大作战 (100分) - 支持在线评测+三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 文章目录 前…

从多站点到多活,XEOS 对象数据容灾能力再提升

近日, XSKY SDS V6.4 新版本发布,其中 XEOS V6.4 全新升级并完善了统一命名空间功能,更进一步增强和完善了异地容灾方案,配合强一致代理读,可以实现异地多活;同时大幅降低管理复杂度,有效降低容…

Apache漏洞复现:【CVE-2021-42013】【CVE_2021_41773】【CVE-2017-15715】

声明 严禁读者利用本文介绍知识点对网站进行非法操作 , 本文仅用于技术交流和学习 , 如果您利用文章中介绍的知识对他人造成损失 , 后果由您自行承担 , 如果您不能同意该约定 , 请您务必不要阅读该文章 , 感谢您的配合 ! 远程代码执行 CVE-2021-42013 描述 Apache HTTP Ser…

RFM模型-分析母婴类产品

1,场景描述 假设我们是某电商平台的数据分析师,负责分析母婴产品线的用户数据。母婴产品的购买行为具有一定的周期性和生命周期特征,如用户在不同怀孕阶段的需求不同,以及宝宝出生后的不同成长阶段需要不同的产品。 2&#xff0…

前缀和(下)

目录 热身: 寻找数组的中心下标 题解: 代码: 进阶: 除自身之外数组的乘积 题解: 代码: 和为K的子数组 题解: 代码: 和可被 K 整除的子数组 题解: 同余定理…

postman教程-6-发送delete请求

领取资料,咨询答疑,请➕wei: June__Go 上一小节我们学习了postman发送put请求的方法,本小节我们讲解一下postman发送delete请求的方法。 HTTP DELETE 请求是一种用于删除指定资源的请求方法。在RESTful API 设计中,DELETE 请求…

基础漏洞系列——CSRF跨站请求伪造

简介: 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack或者 session riding,通常缩写为 CSRF或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操…

Spring Boot 2 入门基础

学习要求 ● 熟悉Spring基础 ● 熟悉Maven使用 环境要求 ● Java8及以上 ● Maven 3.3及以上:https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html#getting-started-system-requirements 学习资料 ● 文档地址: htt…

QTP——功能测试

一、前言(课设目的及内容) QTP是quicktest Professional的简称,是一种自动测试工具。使用QTP的目的是想用它来执行重复的手动测试,主要是用于回归测试和测试同一软件的新版本。因此你在测试前要考虑好如何对应用程序进行测试&…

全局配置-案例:配置tabBar

一、需求:实现如图所示的tabBar效果 二、实现步骤: 1.拷贝图标资源 把image文件夹拷贝到小程序项目根目录中 图片中包含-active的是选中之后的图标 图片中不包含-active的是默认图标 2.新建3个对应的tab页面 3.配置tabBar选项 (1&#xf…

五种不寻常的身份验证绕过技术

身份验证绕过漏洞是现代web应用程序中普遍存在的漏洞,也是隐藏最深很难被发现的漏洞。 为此安全防护人员不断在开发新的认证方法,保障组织的网络安全。尽管单点登录(SSO)等工具通常是对旧的登录用户方式的改进,但这些技术仍然可能包含严重的…

2024年西安交通大学程序设计校赛(ABCDEFO)

题目链接:https://vjudge.net/contest/630537#overview 文章目录 A题题意思路编程 B题题意思路编程 C题题意思路编程 D题题意思路编程 E题题意思路编程 F题题意思路编程 O题题意思路编程 写在前面:今天的训练赛出的题目偏简单,与XCPC的难度差…

什么是React?

01 Why React? What is React? I think the one-line description of React on its home page (https://react.dev/) is concise and accurate: “A JavaScript library for building user interfaces.” 我认为React主页(https://react.dev/)上的一行描述既简洁又准确: …

Java是长连接

Java是长连接,springboot进程被结束才断开 一个连接池有10个连接,2个并发会占用2个连接,用完之后归还给连接池 springboot服务用户的是线程池,返回结果之后,线程自动归还到线程池。跟php机制不一样 php是短链接&am…

关于网络的基础知识

大家好,在当今数字时代,网络已经成为我们生活中不可或缺的一部分,它连接着世界的每一个角落,让信息、资源和人们彼此之间无阻碍地交流和共享。然而,对于许多人来说,网络仍然是一个神秘而复杂的领域&#xf…

模型实战(21)之 C++ - tensorRT部署yolov8-det 目标检测

C++ - tensorRT部署yolov8-det 目标检测 python环境下如何直接调用推理模型转换并导出:pt -> onnx ->.engineC++ tensorrt 部署检测模型不写废话了,直接上具体实现过程+all代码 1.Python环境下推理 直接命令行推理,巨简单yolo detect predict model=yolov8n.pt source…

linux系统的逻辑卷管理及磁盘配额

目录 逻辑卷管理 磁盘配额 逻辑卷管理 lvm:logical volume manager 逻辑卷管理 linux系统下对硬盘分区的一种管理机制。 lvm机制特别适合于管理大存储设备,可以动态的对硬盘进行扩容。 逻辑上的磁盘,概念上的磁盘&a…