欢迎访问 生活随笔!

生活随笔

当前位置: 首页 >

如何使用Towify在小程序中实现夜间模式和日间模式的自由切换?

发布时间:2023/12/14 55 豆豆
生活随笔 收集整理的这篇文章主要介绍了 如何使用Towify在小程序中实现夜间模式和日间模式的自由切换? 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

效果展示

具体步骤

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

步骤分解

制作按钮切换模式

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

制作切换图标

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

创建开关切换触发器

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

创建图标显示隐藏触发器

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

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

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

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

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

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

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

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

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

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

这样就可以使用Towify在小程序中实现夜间模式和日间模式的自由切换了。

总结

以上是生活随笔为你收集整理的如何使用Towify在小程序中实现夜间模式和日间模式的自由切换?的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。