uniapp全网最简单实现夜间模式

原创

已于 2023-03-17 17:38:41 修改 · 4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #微信小程序 #vue.js #css

于 2023-03-17 17:00:12 首次发布

通过在最大view中添加:class绑定和数据字段isDark，结合uview2的Switch组件，实现在uniapp中切换夜间和日间模式。使用uni.setTabBarStyle和uni.setNavigationBarColor改变UI颜色。通过uni.setStorageSync存储切换状态，并在onShow生命周期中读取以保持页面间模式一致。

uniapp的夜间模式，估计是做项目到后期比较常遇到的需求，因为现在的主流就是页面模式的应用了，所以在之前做某个项目的时候，我也是费了一些时间才实现了夜间模式，目前的效果还不算太好，虽然支持夜间和日间模式的手动切换

首先在你最大的view里面添加

:class="isDark?'dark':''"

初始字段data中定义如下：

isDark: false,

我用的是uview2组件中的Switch 开关选择器来进行切换

<u-switch v-model="value" @change="change"></u-switch>
<!-- methods -->
change(e) {
	console.log('change', e);
},

这在需要用的地方执行

	var that = this;
				if (that.value == false) {
					that.isDark = false;
					uni.setTabBarStyle({
						color: '#7e858f',
						selectedColor: '#76C8F9',
						backgroundColor: '#ffffff',
						borderStyle: 'black'
					})
					// plus.setStatusBarStyle("dark");
				} else if (that.value == true) {
					that.isDark = true;
					// 关于tabBar的深色模式修改
					uni.setNavigationBarColor({
						frontColor: '#312736',
						backgroundColor: '#312736',
						animat