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 =