uniapp_切换主题
1. 先创建⼀个index.vue⽂件：
2. 在uni.scss ⾥⽤变量定义颜⾊：
3. 配置浅⾊ css 样式：
4. 配置暗⾊主题颜⾊:  只需要改变颜⾊变量名;
5.
6. 创建⼀个store⽂件：
在⾥⾯创建⼀个  index.js  和  modules⽂件夹
在 theme.js  ⾥⾯ 配置如下：
export default {
state: {
curThemeType: 'light',
},
getters: {
getCurThemeType(state) {
return state.curThemeType
},
flutter uniapp 哪个好},
mutations: {
setCurThemeType(state,data) {
state.curThemeType = data
},
},
}
在 index.js⾥ 引⼊Vuex 和 theme.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import theme from './modules/theme'
export default new Vuex.Store({
modules:{
theme
}
})
最后在main.js⾥引⼊ 刚刚创建的store⽂件：
7. 使⽤ mixin混合机制，让每个组件都能获得拥有 mixin中的⽅法和属性：
创建⼀个utils⽂件夹 和⼀个 miixn.js⽂件
在mixin.js⾥引⼊  Vuex⾥的⽅法
然后再main.js⾥引⼊  minxin.js:
8. 最后⼦需要 在index.vue⾥配置如下:
9. 点击切换主题:
import {mapMutations} from "vuex"
export default {
data() {
return {
title: 'Hello',
fag: false
}
},
onLoad() {
},
methods: {
...mapMutations(['setCurThemeType']),
handle(val) {
if(val == 'light'){
this.setCurThemeType(val)
}else if(val == 'dark'){
this.setCurThemeType(val)
}
}
}
}
10. 总结:
⊙ 实际上只是切换了 class类名  layout-wrap  和 login-wrap-dark
⊙ 使⽤Vuex的作⽤: 通过 this.setCurThemeType()传参 light 或者 drak, 然后将主题存在 state⾥⾯;⽅便任何组件使⽤;
⊙ 使⽤ximin()的作⽤:
因为每个页⾯都会使⽤到  <view class="layout-wrap" :class="getCurThemeType=='dark' ? 'login-wrap-dark':''">        所以直接在 mixin.js⾥⾯ 引⽤了 Vuex, 并且把Getters 和 Mutations 存放在  computed 和  methods⾥⾯;
最后通过  Vue.mixin(themeMixin)  把这computed 和  methods混⼊到所有 Vue组件⾥⾯;
这样任何组件可以直接使⽤ computed ⾥⾯的 getCurThemeType,
11. 配置默认显⽰主题:
在APP.vue⾥ 配置如下:
onLaunch()  这个⽅法是当⼩程序加载完毕后就执⾏;
如果缓存有 主题，就⽤缓存中的主题, 没有则⽤ light主题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。