首先我们来看一下,uni-app-修改组件主题的官方文档:https://uniapp.dcloud.net.cn/component/uniui/uni-sass.html 我们先使用一下组件,然后在看完了样式之后我们在进行修改,这里我们使用数字角标组件,先来看一下效果: 代码语言:html 复制 <template><view><uni-badgetext="2"type="primary"></uni-badge><...
第三步:App.vue动态引入 在App.vue里面通过require动态引入主题,当前每次切换主题的时候要把当前主题数据进行保存。 onLaunch:function(){lettheme=uni.getStorageSync('theme')||'light';// import `@/common/theme/theme-${mode}.scss`; //记住不能import哦require(`@/common/theme/theme-${theme}.scss`)...
},methods: {//初始化主题色initBaseColor(){//读取颜色this.baseColor= uni.getStorageSync("baseColor") ||"#33cccc"},//设置导航栏颜色,包括字体颜色initNavigationBar(){//字体颜色,默认白色varfontColor ="#ffffff"//浅色系背景,需要匹配黑色字体varlightBgColors = []if(lightBgColors.includes(this....
4、然后使用就非常朴实无华:直接用 theme 包裹内容即可 5、下一篇再讲讲 :极简的暗黑模式实现方法,不用搞色板等,用好微信的机制,很容易就能完成暗黑和非暗黑的切换。
由于前期对uniapp考察不是很全面,导致在功能开发1/3以后才发现没有一个公共头,这时发现没法全局收发消息; 主题前期有人搞,接手的时候发现是通过localstorage做的,感觉有点点low,而且是从后台传过来的,根本没必要,还会越存越多。 这篇先提个解决主题的办法。
具体介绍看官网地址:https://uniapp.dcloud.net.cn/tutorial/darkmode.html 三.自定义主题配置 可自行定义多种主题配色,通过js动态修改导航栏等色彩。缺点在于,页面加载缓慢时前期会显示出原有的色彩。整体上不影响使用。 注:在APP 微信小程序 H5 都行 ...
由于最近准备用 uniapp 开发一个新项目 pad 端的 app 项目,并且需要根据不同的子品牌实现一个换肤功能,于是尝试做了一个 uniapp 主题色切换的插件 需求 实现一个通用的theme类,配合<page>页面组件完成整个应用主题色配置,后续项目有类似需求可以直接套用 ...
高颜值、轻量化的uniapp组件,使用Vue3+TS的方式,丰富的组件让你爱不释手,支持暗黑模式、国际化和自定义主题, 视频播放量 4000、弹幕量 0、点赞数 93、投硬币枚数 28、收藏人数 308、转发人数 37, 视频作者 小华同学ai, 作者简介 日常分享一些高效工具与学习方法,快来和我
无效一：pages.json的配置 "app-plus": { "scrollIndicator": "none", "...
uniapp设置不同的主题(Theme) App.vue: @css { html { --primary: blue; --bg-image: url(https://i.loli.net/2020/10/14/gQq96O4DxRVXSKP.jpg); } html[data-theme='green'] { --primary: green; --bg-image: url(https://i.loli.net/2020/10/14/KdraGmYFC8Wpsz5.jpg); } html[...