0
点赞
收藏
分享

微信扫一扫

使用Towify时,如何实现夜间模式和日间模式的自由切换?

通过触发器中的执行其它触发器动态显示夜间模式和日光模式图标的显示和隐藏,同时使用组件切换器控制不同组件之间的切换

效果展示

具体步骤

  • 制作按钮切换模式
  • 制作切换图标
  • 创建开关切换触发器
  • 创建图标显示隐藏触发器
  • 创建日光模式和夜间模式的触发器
  • 制作夜间模式和日光模式页面
  • 设置组件切换器的链接内容

步骤分解

制作按钮切换模式

  • 拖拽 开关 到 根容器
  • 选中 开关
  • 点击 检查面板 中的 数据绑定与设置
  • 选择 默认激活模式
  • 点击 检查面板 中的 样式
  • 配置样式
  • 配置样式完成后,关闭 默认激活模式

使用Towify时,如何实现夜间模式和日间模式的自由切换?_无代码

使用Towify时,如何实现夜间模式和日间模式的自由切换?_无代码_02

使用Towify时,如何实现夜间模式和日间模式的自由切换?_触发器_03

制作切换图标

  • 拖拽 图标 到 根容器 中
  • 点击 检查面板 中的 数据绑定与设置
  • 选择太阳图标
  • 月亮图标的操作相同

使用Towify时,如何实现夜间模式和日间模式的自由切换?_触发器_04

创建开关切换触发器

  • 选中 开关
  • 点击 检查面板 中的 触发器
  • 创建 触发器

使用Towify时,如何实现夜间模式和日间模式的自由切换?_微信小程序_05

使用Towify时,如何实现夜间模式和日间模式的自由切换?_微信小程序_06

创建图标显示隐藏触发器

  • 选中 图标
  • 点击 检查面板 中的 触发器
  • 创建 触发器
  • 月亮图标的相关触发器,操作逻辑相同

使用Towify时,如何实现夜间模式和日间模式的自由切换?_微信小程序_07

使用Towify时,如何实现夜间模式和日间模式的自由切换?_无代码_08

使用Towify时,如何实现夜间模式和日间模式的自由切换?_触发器_09

使用Towify时,如何实现夜间模式和日间模式的自由切换?_无代码_10

  • 将月亮图标 拖到 太阳图标上

使用Towify时,如何实现夜间模式和日间模式的自由切换?_触发器_11

创建日光模式和夜间模式的触发器

  • 拖拽 容器 到 根容器 中
  • 选中 容器
  • 点击 检查面板 中的 样式
  • 配置样式

使用Towify时,如何实现夜间模式和日间模式的自由切换?_触发器_12

  • 新增一个 样式
  • 点击 选中
  • 配置 样式

使用Towify时,如何实现夜间模式和日间模式的自由切换?_触发器_13

  • 拖拽 标签文本 到 样式
  • 选中 标签文本
  • 点击 检查面板 中的 样式
  • 配置字体 样式

使用Towify时,如何实现夜间模式和日间模式的自由切换?_微信小程序_14

  • 新增一个 样式
  • 配置 样式

使用Towify时,如何实现夜间模式和日间模式的自由切换?_无代码_15

制作夜间模式和日光模式页面

  • 选中 容器
  • 点击 检查面板 中的 触发器
  • 创建 触发器

使用Towify时,如何实现夜间模式和日间模式的自由切换?_无代码_16

使用Towify时,如何实现夜间模式和日间模式的自由切换?_微信小程序_17

  • 选中 开关
  • 添加 执行触发器

使用Towify时,如何实现夜间模式和日间模式的自由切换?_触发器_18

举报

相关推荐

0 条评论