目录
- 1 创建页面
- 2 为文本组件增加事件
- 3 检查用户协议是否勾选
- 最终效果
我们上一篇介绍了打开首页时弹出登录窗口的功能,本篇我们实现一下用户协议。
1 创建页面
功能是点击用户协议的时候打开具体的协议内容,需要先创建一个页面。打开自定义应用,点击新建页面的图标
输入页面名称
在页面里添加一个数据详情组件
数据模型选择用户协议,数据筛选设置为协议名称等于用户协议
然后清空数据详情的组件,我们添加一个富文本展示组件
给内容属性绑定字段,点击fx,绑定为协议内容
现在页面内容是空的,因为还没有录入数据,点击左侧导航条的数据源图标,找到我们的用户协议数据源,点击管理数据
录入我们的测试数据
数据录入后再次刷新页面,数据就加载出来了
2 为文本组件增加事件
我们现在用户协议用蓝色标识,引导用户可以点击,选中文本组件,增加事件
设置打开页面事件
选择我们的用户协议页面
用户协议页面还应该有个导航条引导用户再回到首页,添加一个顶部导航组件
修改我们的导航标题,改为用户协议
3 检查用户协议是否勾选
在登录的时候需要检查用户协议是否勾选,可以在点击确定按钮时候加判断条件。选中确定按钮,设置事件,选中逻辑分支
设置判断条件
If($w.radio1.value==='1', true, false)
这个表达式有三个参数,第一个是条件,第二个和第三个是返回值。逻辑是如果条件为true就返回true,如果条件为false就返回false
我们这里用$w.radio1.value获取单选按钮的选中值,如果值为1表示单选按钮被选中,否则就返回false
如果单选按钮被选中,我们跳转到注册页面,新建一个用户注册的页面
当满足条件时我们打开用户注册页面
当不满足条件时,设置提示信息,提示用户勾选
最终效果
打开首页,点击用户协议跳转到用户协议页面,未勾选的时候点击确认提示信息,勾选之后跳转到注册页面