腾讯云微搭低代码学习日记（二）

第二天

一、组件样式的动态控制

在页面中添加2个按钮组件，分别命名为点击变红和点击变绿，再向页面中添加一个文本组件。





再创建一个自定义变量，命名为 var1 。





变量类型选择对象，单击保存。





名称为点击变红的按钮：设置点击事件，触发变量赋值，为变量 var1 赋值表达式内容：{color:"red"}。





名称为点击变绿的按钮：设置点击事件，触发变量赋值，为变量 var1 赋值表达式内容：{color:"green"}。





文本组件-样式配置的 style 绑定属性中，单击 fx，打开表达式弹窗，输入变量 var1 的路径：$w.page.dataset.state.var1。





完成以上配置后，单击编辑器右上方绿色的预览，即可体验效果，单击两个按钮，文本颜色会跟随变更。





二、协议声明区块

区块主要使用场景

※用户信息的表单提交。

※用户信息的协议声明。

图片展示及主要模块构成

图片展示







主要模块构成







整体模块分为弹窗组件、普通容器、勾选组件。

在弹窗组件中，用文本组件包含了协议信息和隐私政策，滚动容器来进行滑动展示。

在普通容器中，用文本组件包含了协议声明勾选提示。

勾选组件是勾选协议的入口。

使用说明

表单场景使用

当在表单场景提交信息时，可直接拖动服务协议区块至提交按钮上方，即可使用。





当未勾选时，必填提示会在勾选框文字下方进行展示，勾选后即可提交。





未勾选文字提示设置入口：单击勾选组件 > 在右侧属性栏 > 找到必填校验提示。





非表单场景使用

1. 当在非标单场景使用时，例如用户登录场景，先拖动服务协议区块至登录按钮上方。

2. 在按钮的禁用属性上绑定已有变量 !$page.dataset.state.customControl，如下图所示：







说明：

变量名前添加 ! 字符。

当未勾选时，必填提示会以弹窗形式进行展示，勾选后即可提交。





未勾选文字提示设置入口：单击勾选组件 > 在右侧属性栏 > 单击事件变量赋值等4个事件 > 单击显示消息提示 > 右侧即可设置标题和图标 。