uniapp 实现动态切换全局主题色

需求:实现开发的应用中切换主题色

如果只是需要一个主题色没有切换的需要 完全可以使用uniapp里面uni.scss文件文档

思路:预先在一个公共css中定义你需要的主题颜色,这里只是示例定义了两种颜色

• 参考文档 从中获得思路可以通过动态设置data-xx从而配合css属性选择器来动态改变主题色
• 本来是想通过mixin直接混入一个变量来达到全局控住主题色,忽略了minxi的data需要是一个函数 所以返回的值在每个页面之间是不关联的,从而使用vuex,也可以定义一个全局变量uni里面使用全局变量
• 使用store的原因是潘佳辰大佬使用store实现动态路由以及头部栏的固定
• 上图真机为红米k30ultra 安卓10

实现

• 涉及到的知识点为uniappp vuex(这里我使用了store的模块化)
• 全局css在app.vue里面引入

[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中含有,如果不传入默认为粉色)console.log(color)state.appTheme = color}}
const getters = {}
const actions = {};
export default {state,actions,mutations,getters,namespaced: true
}//getters中的数据(这里的getters是单个文件)
appTheme(state) {return state.setting.appTheme
}

• 在单页面中给你所需要设置主题色的dom添加date-them属性

//html
切换主题色
//js
import { mapGetters } from 'vuex';
computed: {...mapGetters(['appTheme'])
}

• 为了省事我直接在main.js使用mixin混入了toggleAppTheme函数

Vue.mixin({methods: {toggleAppTheme(color = 'blue') {this.$store.commit('setting/TOGGLE_APP_THEME', color);}}
})

感觉这种方式挺麻烦的,期望大佬出现

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！