订水商城H5实战教程-03用户协议

news2024/10/2 22:27:53

目录

  • 1 创建页面
  • 2 为文本组件增加事件
  • 3 检查用户协议是否勾选
  • 最终效果

我们上一篇介绍了打开首页时弹出登录窗口的功能,本篇我们实现一下用户协议。

1 创建页面

功能是点击用户协议的时候打开具体的协议内容,需要先创建一个页面。打开自定义应用,点击新建页面的图标
在这里插入图片描述
输入页面名称
在这里插入图片描述
在页面里添加一个数据详情组件
在这里插入图片描述
数据模型选择用户协议,数据筛选设置为协议名称等于用户协议
在这里插入图片描述
然后清空数据详情的组件,我们添加一个富文本展示组件
在这里插入图片描述
给内容属性绑定字段,点击fx,绑定为协议内容
在这里插入图片描述
现在页面内容是空的,因为还没有录入数据,点击左侧导航条的数据源图标,找到我们的用户协议数据源,点击管理数据
在这里插入图片描述
录入我们的测试数据
在这里插入图片描述
数据录入后再次刷新页面,数据就加载出来了
在这里插入图片描述

2 为文本组件增加事件

我们现在用户协议用蓝色标识,引导用户可以点击,选中文本组件,增加事件
在这里插入图片描述
设置打开页面事件
在这里插入图片描述
选择我们的用户协议页面
在这里插入图片描述
用户协议页面还应该有个导航条引导用户再回到首页,添加一个顶部导航组件
在这里插入图片描述
修改我们的导航标题,改为用户协议
在这里插入图片描述

3 检查用户协议是否勾选

在登录的时候需要检查用户协议是否勾选,可以在点击确定按钮时候加判断条件。选中确定按钮,设置事件,选中逻辑分支
在这里插入图片描述
设置判断条件
在这里插入图片描述

If($w.radio1.value==='1', true, false)

这个表达式有三个参数,第一个是条件,第二个和第三个是返回值。逻辑是如果条件为true就返回true,如果条件为false就返回false

我们这里用$w.radio1.value获取单选按钮的选中值,如果值为1表示单选按钮被选中,否则就返回false

如果单选按钮被选中,我们跳转到注册页面,新建一个用户注册的页面
在这里插入图片描述
当满足条件时我们打开用户注册页面
在这里插入图片描述
在这里插入图片描述
当不满足条件时,设置提示信息,提示用户勾选
在这里插入图片描述
在这里插入图片描述

最终效果

打开首页,点击用户协议跳转到用户协议页面,未勾选的时候点击确认提示信息,勾选之后跳转到注册页面
在这里插入图片描述

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

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

相关文章

云原生之深入解析Kubernetes集群内的服务通信机制

一、传统的服务到服务通信 先了解一下支持服务间通信的 3 个原生 K8s 对象:ClusterIP Service、DNS 和 Kube-Proxy: 在进入 Kubernetes 生态系统之前,快速了解一下传统的服务到服务通信:通信是通过 IP 地址进行的,因此…

数组对象深拷贝

多层嵌套的数组对象使用扩展运算符原数组依然被修改: let arr [{name:a,num:1,children:[{name:a1,num:1,},{name:a2,num:2,},{name:a3,num:3,}]},{name:b,num:1,children:[{name:b1,num:1,},{name:b2,num:2,}]}] let arr2 [...arr] arr2[0].children.splice(1,1…

5.MySQL基本查询

个人主页:Lei宝啊 愿所有美好如期而遇 目录 表的增删改查 Create 单行数据 全列插入 多行数据 指定列插入 插入否则更新 替换 Retrieve SELECT 列 全列查询 指定列查询 查询字段为表达式 为查询结果指定别名 结果去重 WHERE 条件 结果排序 筛…

xhadmin多应用Saas框架之超级SEO应用介绍

xhadmin是什么? xhadmin 是一套基于最新技术的研发的多应用 Saas 框架,支持在线升级和安装模块及模板,拥有良好的开发框架、成熟稳定的技术解决方案、提供丰富的扩展功能。为开发者赋能,助力企业发展、国家富强,致力于…

香飘飘的想象空间:全面创新驱动外延与内涵双增长,未来可期

面对时常会发生代际更替的消费者主力群体,创新已经成为一种商业上的必须。 日前,香飘飘发布了三季报,数据显示,第三季度,香飘飘营业收入8.08亿元,同比增长20.41%。前三季度,香飘飘营收19.79亿元…

制药企业固体制剂设备管理及维护要点

在制药企业的生产过程中,固体制剂设备是至关重要的一环。有效管理和维护这些设备对于确保生产质量、提高生产效率以及延长设备寿命至关重要。本文将从以下三个方面介绍制药企业固体制剂设备的主要类型、常见管理问题以及设备维护的关键要点。 制药企业固体制剂设备主…

基于蝴蝶算法的无人机航迹规划-附代码

基于蝴蝶算法的无人机航迹规划 文章目录 基于蝴蝶算法的无人机航迹规划1.蝴蝶搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要:本文主要介绍利用蝴蝶算法来优化无人机航迹规划。 1.蝴蝶搜索算法 …

C# Winform编程(9)网络编程

网络编程 HTTP网络编程IPAddress IP地址类WebClient类WebRequest类和WebResponse类 WebBrowser网页浏览器控件TCP网络编程TcpClient类TcpListener类NetworkStream类Socket类 HTTP网络编程 IPAddress IP地址类 IPAddress类代表IP地址,可在十进制表示法和实际的整数…

springMVC 文件上传和下载

文章目录 1、文件下载2、文件上传 1、文件下载 使用ResponseEntity实现下载文件的功能 RequestMapping("/testDown") public ResponseEntity<byte[]> testResponseEntity(HttpSession session) throws IOException {//获取ServletContext对象ServletContext …

《深入浅出OCR》第四章:OCR文字识别

✨专栏介绍: 经过几个月的精心筹备,本作者推出全新系列《深入浅出OCR》专栏,对标最全OCR教程,具体章节如导图所示,将分别从OCR技术发展、方向、概念、算法、论文、数据集等各种角度展开详细介绍。 👨‍💻面向对象: 本篇前言知识主要介绍深度学习知识,全面总结知知识…

细谈MySQL的一下经典问题(一)

在MySQL中INNER JOIN、LEFT JOIN、RIGHT JOIN 和 FULL JOIN 有什么区别&#xff1f; 在MySQL中&#xff0c;INNER JOIN、LEFT JOIN&#xff08;或LEFT OUTER JOIN&#xff09;、RIGHT JOIN&#xff08;或RIGHT OUTER JOIN&#xff09;和 FULL JOIN&#xff08;或FULL OUTER JOI…

论文关键算法复现:基于CEEMDAN和MPE联合小波阈值的振动信号降噪方法

论文简介&#xff1a; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; ​ 基于CEEMDAN、多尺度排列熵和小波阈值的信号降噪方法结合了多种技术手段&#xff0c;可有效降低信号中的噪声。以下是该方法的步骤&#xff1a; 1. 使用CEEMDAN将原始信号分解为…

MyBatisPlus的使用【详细】

目录 Mybatis MybatisPlus特性 MybatisPlus的使用 常见注解 TableName TableId TableField MP常见配置 条件查询器Wrapper QueryWrapper UpdateWrapper LambdaQueryWrapper 自定义SQL Service接口 批量添加数据 MP的代码生成 MP静态工具 MP扩展功能之逻辑删除…

EPPlus库的安装和使用 C# 中 Excel的导入和导出

安装 工具栏->NuGet 包管理器->管理解决方案的NuGet程序包 安装到当前项目中 使用 将 DataGridView 数据导出为Excel 首先&#xff0c;需要将数据DataGridView对象转换为DataTable private void btnExport_Click(object sender, EventArgs e) {// 1.将当前页面的data…

SpringMVC 资源状态转移RESTful

文章目录 1、RESTful简介a>资源b>资源的表述c>状态转移 2、RESTful的实现HiddenHttpMethodFilterRESTful案例 1、RESTful简介 REST&#xff1a;Representational State Transfer&#xff0c;表现层资源状态转移。 a>资源 资源是一种看待服务器的方式&#xff0c…

C++栈、队列、优先级队列模拟+仿函数

目录 一、栈的模拟和deque容器 1.deque 1.1deque结构 1.2deque优缺点 2.stack模拟 二、队列的模拟 三、priority_queue优先级队列 1.优先级队列模拟 2.添加仿函数 一、栈的模拟和deque容器 在之前&#xff0c;我们学过了C语言版本的栈&#xff0c;可以看这篇文章 栈和…

Qt私有信号实现(private signal)

在使用Qt信号槽机制的时候&#xff0c;有时候我们需要一个信号只能由类内发出&#xff0c;而不允许使用该类对象的用户发出&#xff0c;此时就需要私有信号的支持&#xff0c;而信号的关键字 signals&#xff0c;点进去它的实现&#xff0c;大概如下&#xff1a; signals:再次…

推荐-25个开源软件

今天&#xff0c;我想让您对下一个 25 个出色的开源软件。您可以安装它&#xff0c;并且几乎开箱即用&#xff01; ⚠️使用软件前请检查是否安全️️ 1. Portmaster (Go) — 隐私保护者 Portmaster 由 Safing 开发&#xff0c;是一款开源软件&#xff0c;可帮助您保护在线活…

PyTorch基础(18)-- torch.stack()方法

一、方法详解 首先&#xff0c;看一下stack的直观解释&#xff0c;动词可以简单理解为&#xff1a;把……放成一堆、把……放成一摞。 有了对stack方法的直观感受&#xff0c;接下来&#xff0c;我们正式解析torch.stack方法。 PyTorch torch.stack() method joins (concaten…