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

目录

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

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

1 创建页面

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

2 创建URL参数

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

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

3 配置数据详情组件

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

4 从分类页跳转到详情页

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

5 搭建详情页

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

总结

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

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

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

相关文章

中学生学人工智能系列:如何用AI学英语

经常有读者朋友给公众号《人工智能怎么学》留言咨询如何使用人工智能学习语文、数学、英语等科目。这些都是中学教师、中学生朋友及其家长们普遍关注的问题。仅仅使用留言回复的方式,不可能对这些问题做出具体和透彻的解答,因此本公众号近期将推出中学生…

如何在phpMy管理对Joomla后台的登录密码进行重置

本周有一个客户,购买Hostease的虚拟主机,询问我们的在线客服,如何在phpMy管理对Joomla后台的登录密码进行重置?我们为用户提供相关教程,用户很快解决了遇到的问题。在此,我们分享这个操作教程,希…

LeetCode题练习与总结:平衡二叉树--110

一、题目描述 给定一个二叉树,判断它是否是平衡二叉树。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:true示例 2: 输入:root [1,2,2,3,3,null,null,4,4] 输出:false示例 3&#xff1a…

【Java用法】java中计算两个时间差

java中计算两个时间差 不多说,直接上代码,可自行查看示例 package org.example.calc;import java.time.LocalDateTime; import java.time.format.DateTimeFormatter; import java.time.temporal.ChronoUnit;public class MinusTest {public static void…

97.网络游戏逆向分析与漏洞攻防-ui界面的设计-通过逆向分析确认角色信息

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 如果看不懂、不知道现在做的什么,那就跟着做完看效果,代码看不懂是正常的,只要会抄就行,抄着抄着就能懂了 内容…

分享几个PHP的webshell免杀思路

前言:网上的免杀思路有不少,不过大部分是基于混淆和加密的,我这里分享两个基于匿名函数、变量覆盖和反序列化的webshell思路,思路来源于深信服EDR的RCE漏洞。 ps:远程获取的时候,其实也可以用fopen读取远程…

WAMP无法启动mysql

一种原因是原来安装过mysql,mysql默认是自启动的,而WAMP内置mysql会发生冲突,所以 解决方法: winR 输入 services.msc 将mysql关闭,并设为手动模式

Khoj:开源个人AI助手能连接你的在线和本地文档充当你的第二大脑

项目简介 Khoj是一个开源的、个人化的AI助手,旨在充当你的第二大脑。它能够帮助你回答任何问题,不论这些问题是在线上的还是在你自己的笔记中。Khoi 支持使用在线AI模型(例如 GPT-4)或私有、本地的语言模型(例如 Llama3)。你可以选择自托管 Khoj&#x…

AlexNet,LeNet-5,ResNet,VGG-19,VGG-16模型

模型 AlexNet导入必要的库:加载类别名称:创建标签映射字典:加载图像数据和对应的标签:构建AlexNet模型:编译模型:训练模型: LeNet-5导入必要的库:加载类别名称:创建标签映…

.net8.0与halcon编程环境构建

1.安装vs2022 2.安装h-12.0.exe ,不要勾选复选框 3.vs2022新建wpf应用程序 4.依赖项添加项目应用,选择halcondotnet.dll 5.安装System.Drawing 安装 HalconDotNet 安装 Rti.HDevEngineDotNet 在工具箱 空白处右键 应用halcon.dll WPF控件也应用halcon.dll 6.xaml申明hal…

5款ai文案自动生成器,让你写作爆款文案不犯难!

现如今,无论是用于社交媒体、广告宣传、网站内容还是其他各种领域,优秀的文案都能吸引更多的关注和流量。但是,对于许多创作者来说,想要创作出高质量的文案并非易事,常常会面临灵感枯竭、思路卡顿等问题。而现在有了一…

raid配置与实战

一、raid理论 1、raid概述 raid(磁盘阵列):是用不同的硬盘分区,组成一个逻辑上的硬盘,高可用(冗余)。 2、raid级别 2.1、raid0条带化存储 数据分散在多个物理磁盘上的存储方式,…

如何解压忘记了密码的加密zip压缩包?这两个方法收藏好!

加密是一种保护信息不被未经授权访问的重要手段。ZIP压缩包作为一种常见的文件压缩格式,zip文件加密是很多人都回去做的一件事情,那么zip加密文件如何解密?有几种方法可以解密呢?今天介绍几种方法给大家。 一、尝试常用密码 我们…

SAP实施方法论

SAP新实施方法论 RDS Activate

大摩“凑热闹”:当前氧化铝紧平衡,任何供给冲击都将导致价格急剧波动

大摩认为,全球有590万吨氧化铝供应受阻,相等于扣除中国后全球供应约一成,而氧化铝需求可能有所上升,同时氧化铝库存缓冲有限,因此任何供给冲击都将导致价格急剧波动。 文章内容 今年以来氧化铝期货价格一路上行&#…

Thingsboard规则链:Customer Attributes节点详解

在物联网(IoT)平台Thingsboard的规则引擎中,Customer Attributes节点扮演了至关重要的角色,它允许用户访问和操作与客户(Customer)实体相关的属性数据。这些属性可以是静态信息,如客户名称、联系信息,或是动…

FreeRTOS学习笔记-基于stm32(7)任务状态查询与任务时间统计API函数

1、FreeRTOS任务相关API函数 函数描述uxTaskPriorityGet()查询某个任务的优先级vTaskPrioritySet()改变某个任务的任务优先级uxTaskGetSystemState()获取系统中任务状态vTaskGetInfo()获取某个任务信息xTaskGetApplicationTaskTag()获取某个任务的标签(Tag)值xTaskGetCurrentT…

spring分析工具_springboot startup analyze的部署和使用

工具是开源工具 ,可以放心使用 我是从开源中国OCSChina看到的顺便安利一下 部署 教程 https://github.com/linyimin0812/spring-startup-analyzer 直接下载地址 https://github.com/linyimin0812/spring-startup-analyzer/releases/download/v3.0.0/spring-startup-analyzer.…

Javaweb基础之Filter

大家好,这里是教授.F 引入: 为什么需要过滤器???我们在访问一个项目的时候,常常有很多页面,如果没有过滤器,则我们需要在用户访问一个页面的时候,都要进行一个校验&…

文心智能体平台:快来创建你的Java学习小助理,全方位辅助学习

文章目录 一、文心智能体平台1.1平台介绍1.2智能体介绍 二、智能体创建三、体验与总结 一、文心智能体平台 文心智能体平台是百度推出的基于文心大模型的智能体(Agent)平台,支持广大开发者根据自身行业领域、应用场景,选取不同类…