1***@qq.com
1***@qq.com
  • 发布:2020-07-20 22:21
  • 更新:2022-02-16 09:37
  • 阅读:2072

夜间模式/黑暗模式的另一种简单实现思路

分类:nvue

前言
项目临近上线,突然说要适配黑暗模式,nvue项目,没有提前设计好的情况下,css换皮简直工程浩大,时间来不及。
那么偷懒时间好巧看到某新闻类app的夜间模式就是一个暗色遮罩(ps:走过一段改变屏幕亮度的弯路),这样灵感不就来了嘛。

正文
1,plus.nativeObj.View创建一个rgba(0,0,0,0.3)遮罩view;
2,设置view的interceptTouchEvent为false,不影响其他页面的点击;
3,使用startAnimation方法在副view上添加一个gif(太阳变月亮的哪种),实现动画效果;
4,打开夜间模式就view.show();startAnimation();就够了。
5,除了开关之外,还有存入storage一个isNight标识,当app进入或者启动页结束后根据isNight来重新显示遮罩view。
另外上述3完全可以用两个view实现,而且更方便。

废话
这种取巧的方法亲测好用,不会影响到原生video或者页面跳转。
ps:在想到这个办法之前已经被自己坑得体无完肤了,抛砖引玉,想知道css换皮在nvue中有没有好的实现方式啊,毕竟无法子类名选择,难道就真的很蛋疼的一个一个的写吗,有没有什么巧妙的方法呢。

1 关注 分享
Kytrun

要回复文章请先登录注册

晓风丶0420

晓风丶0420

楼主现在找到好用的方法了吗
2022-02-16 09:37
维羊

维羊

那还不如直接修改屏幕亮度??
2020-12-06 02:28
1***@qq.com

1***@qq.com

在App.vue的onLaunch使用plus.nativeObj.View就能够所有页面覆盖,我这边是iphone12测的,不清楚其他的系统兼不兼容
2020-12-06 00:30
1***@qq.com

1***@qq.com (作者)

回复 liuxy :
目前我也在找好办法,vue倒好说,nvue没办法学h5那一套
2020-11-06 08:51
2***@qq.com

2***@qq.com

想法不错 简单实用
2020-09-02 09:53
liuxy

liuxy

最近也是在做这个暗黑模式, nvue和vue混合的app, 真的是太麻烦了, 每个页面每个组件都要改一遍, 不知道楼主有没有发现其他的好办法实现
2020-09-02 09:39