数字货币网站开发需求,wordpress搭建cms网站,在线教育网站开发方案,子网站怎么做目录 问题示例代码解决思路1#xff08;缺点影响显示效果有延迟#xff09;解决思路2——通过路由刷新页面#xff08;缺点只适用于部分网页#xff09;解决思路3——vuex#xff08;没学会~#xff09;总结 欢迎关注 『uniapp』 专栏#xff0c;持续更新中 欢迎关注 『… 目录 问题示例代码解决思路1缺点影响显示效果有延迟解决思路2——通过路由刷新页面缺点只适用于部分网页解决思路3——vuex没学会~总结 欢迎关注 『uniapp』 专栏持续更新中 欢迎关注 『uniapp』 专栏持续更新中 问题示例代码
我这个业务场景是在跟随系统主题深色/浅色模式的情况下 用户在设置中修改了主题后app自动适应主题。
开启了主题监听 uni.onThemeChange(({theme}) {console.log(onThemeChange, theme)uni.setStorageSync(sys_theme, theme)if (uni.getStorageSync(theme_isAuto)) {uni.setStorageSync(theme_mode, theme)}})在onshow中根据读取的主题设置颜色样式 this.theme_mode uni.getStorageSync(theme_mode)//设置顶部导航背景颜色this.navbarBackground {background: this.theme_mode dark ? this.themeConfig.dark.navBgColor : this.themeConfig.light.navBgColor};//顶部导航字体颜色this.navTxtStyle this.theme_mode dark ? this.themeConfig.dark.navTxtStyle : this.themeConfig.light.navTxtStyle;console.log(ok, this.theme)排查了半天bug最后发现输出日志的结果
ok, this.theme
theme_mode, theme也就是我们的onshow都执行完毕了onThemeChange才姗姗来迟当然无法成功渲染页面。 解决思路1缺点影响显示效果有延迟
延迟执行虽然很low但是一步到位。我最后才想到这个办法~最关键的是之前试了没有成功一直以为不可行后来发现是因为没有把this.theme_mode uni.getStorageSync(theme_mode)放到setTimeout里面。 setTimeout(() {this.theme_mode uni.getStorageSync(theme_mode)//设置顶部导航背景颜色this.navbarBackground {background: this.theme_mode dark ? this.themeConfig.dark.navBgColor : this.themeConfig.light.navBgColor};//顶部导航字体颜色this.navTxtStyle this.theme_mode dark ? this.themeConfig.dark.navTxtStyle : this.themeConfig.light.navTxtStyle;}, 100);解决思路2——通过路由刷新页面缺点只适用于部分网页
本质是用uni.reLaunch 页面跳转而且会导致你无法跳转回原来的网页
在app.vue的onLaunch中 onLaunch() {uni.onThemeChange(({ theme }) {console.log(onThemeChange, theme);// 触发路由刷新this.refreshPageRoute();});},在app.vue的methods中
// 触发路由刷新的方法
refreshPageRoute() {// 获取当前页面路由路径const pages getCurrentPages();const currentPage pages[pages.length - 1];const route currentPage.route;console.log(/${route}); // 注意使用反引号来实现字符串插值// 使用 uni.reLaunch 方法刷新当前页面uni.reLaunch({url: /${route}});
} 解决思路3——vuex没学会~
使用 Vuex 管理状态 如果你的应用使用了 Vuex 来管理全局状态你可以在主题变化时更新一个全局状态然后在需要更新的页面中监听这个状态的变化在变化时手动调用 onShow 方法。 总结
大家喜欢的话给个点个关注给大家分享更多计算机专业学生的求学之路
版权声明
发现你走远了mzh原创作品转载必须标注原文链接
Copyright 2024 mzh
Crated2024-4-1 欢迎关注 『uniapp』 专栏持续更新中 欢迎关注 『uniapp』 专栏持续更新中 『未完待续』
