赞
踩
使用微信小程序的用户越来越多,因为它使用起来非常方便,而对于开发人员来讲,则需要各种优化布局,使其更利于用户体验。
在微信小程序上,很多小程序都拥有夜间模式,深色模式等功能,今天来讲一下夜间模式的实现。
一、新建开关,利用switch
,添加如下代码
显示如下:
二、开关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
四、引用代码
在对应的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, }) }
七、以上就可以完成白夜间模式切换。
ps:顶部栏可使用app.globalData.skinSwitch
值,添加方法与之类似,不在此赘述。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。