2023年12月10日发(作者：苹果se2上市价格)
uniapp实现动态切换全局主题色
需求:实现开发的应用中切换主题色
如果只是需要一个主题色没有切换的需要 完全可以使用uniapp里面文件
思路:预先在一个公共css中定义你需要的主题颜色,这里只是示例定义了两种颜色
从中获得思路可以通过动态设置
data-xx
从而配合css属性选择器来动态改变主题色
本来是想通过
mixin
直接混入一个变量来达到全局控住主题色,忽略了minxi的data需要是一个函数 所以返回的值在每个页面之间是不关联
的,从而使用
vuex
,也可以定义一个全局变量
使用
store
的原因是潘佳辰大佬使用
store
实现动态路由以及头部栏的固定
上图真机为红米k30ultra 安卓10
实现
涉及到的知识点为uniappp vuex(这里我使用了store的模块化)
全局css在里面引入
[data-theme='pink'] {
background-color: pink;
color: #fff;
}
[data-theme='blue'] {
background-color: blue;
color: #fff;
}
我们可以在
vuex
中定义一个
appTheme
全局主题变量,并且写入一个函数以此来修改主题变量
const state = {
appTheme: 'pink'
};
const mutations = {
TOGGLE_APP_THEME(state, color = 'pink') { //你可以传入一个颜色参数(需要上面公共css中含有,如果不传入默认为粉色)
(color)
me = color
}
}
const getters = {}
const actions = {};
export default {
state,
actions,
mutations,
getters,
namespaced: true
}
//getters中的数据(这里的getters是单个文件)
appTheme(state) {
return me
}
在单页面中给你所需要设置主题色的dom添加date-them属性
//html
//js
import { mapGetters } from 'vuex';
computed: {
...mapGetters(['appTheme'])
}
为了省事我直接在使用mixin混入了
toggleAppTheme
函数
({
methods: {
toggleAppTheme(color = 'blue') {
this.$('setting/TOGGLE_APP_THEME', color);
}
}
})感觉这种方式挺麻烦的,期望大佬出现
发布者：admin，转转请注明出处：http://www.yc00.com/num/1702209282a1186718.html
评论列表（0条）