用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序实现皮肤功能(夜间模式)

Rolan 2017-6-19 00:39

这篇文章主要给大家介绍了关于利用微信小程序实现皮肤功能,也就是实现夜间模式的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 ... ...

老规矩,先上效果图

个人对夜间模式这个功能情有独钟

晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀

所以我一直用某浏览器,因为有夜间模式

言归正传,依然是分析功能点

  1.点击按钮,切换一套css(这个功能很简单)


  2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果


  3.把设置保存到本地,退出应用再进来时,依然加载上次设置的皮肤

先从切换开始吧,switch很少用,还是贴一下吧

  1. bindchange="switchChange" color ="#F39C89" class="switch"/>
  1. Page({
  2. data: {
  3. skinStyle: ""
  4. },
  5. onLoad: function (options) {
  6. },
  7. switchChange:function(e){
  8. var that =this
  9. var style
  10. //如果开启
  11. if(e.detail.value == true){
  12. style="dark"
  13. }else{
  14. //否则
  15. style.skin = ""
  16. 赞赏
    鲜花
    鲜花 (1)
    鸡蛋
    鸡蛋

    刚表态过的朋友 (1 人)

    分享至 : QQ空间
    收藏
    原作者: 明月半倚深秋_f45e 来自: 简书

    相关阅读