当前位置:   article > 正文

js添加关闭功能_微信小程序开发之添加夜间模式功能

微信开发者工具切换成夜间模式源码

使用微信小程序的用户越来越多,因为它使用起来非常方便,而对于开发人员来讲,则需要各种优化布局,使其更利于用户体验。

在微信小程序上,很多小程序都拥有夜间模式,深色模式等功能,今天来讲一下夜间模式的实现。

一、新建开关,利用switch,添加如下代码

ca57ae1dbac9d2493327e2f03d5c33a6.png

显示如下:

49af1af920e026c4bb9022492f511870.png

二、开关js

data中添加:skinStyle: '',

添加代码:

switchChange:function(e){ var that =this //如果开启 if(e.detail.value == true){ app.globalData.skin="dark" } else { app.globalData.skin="my" } //保存信息 that.setData({ skinStyle: app.globalData.skin })
//保存到本地 wx.setStorage({ key: "skin", data: app.globalData.skin }) },

三、新建样式文件

新建一个目录及样式文件:如dark.wxss

85afbf475f80b12551b2950c5bed0a31.png

四、引用代码

在对应的wxml文件里,给view添加{{skinStyle}},使其识别对应样式

(原理:选择开启,则替换该样式,关闭则显示原样式)

在wxss里头部引用:

@import '../../components/skin/dark.wxss';

五、设置全局变量

app.js中添加:

globalData: { skin: '' },getSkin: function(){ var that =this wx.getStorage({ key: 'skin', success: function (res) { that.globalData.skin = res.data } }) },

六、其他页面添加以下代码即可

onLoad: function (options) {       app.setNavBarBg();//设置标题栏背景色       var that = this       that.setData({           skinStyle: app.globalData.skin,       })   }

七、以上就可以完成白夜间模式切换。

49cdd3ebc62d6a97581e88ae4c5c7211.png

ps:顶部栏可使用app.globalData.skinSwitch值,添加方法与之类似,不在此赘述。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/94092
推荐阅读
相关标签
  

闽ICP备14008679号