效果圖
1.在components文件夾中新建MyTabbar組件
2.組件代碼
<template>
<view class="myTabbarBox" :style="{ backgroundColor: backgroundColor }">
<u-tabbar :placeholder="true" zIndex="0" :value="MyTabbarState" @change="tabbarChange" :fixed="false"
:activeColor="tabbarSet.activeColor" :inactiveColor="tabbarSet.inactiveColor" :safeAreaInsetBottom="true">
<u-tabbar-item v-for="(item,index) in tabbarSet.list" :text="item.title">
<image class="u-page__item__slot-icon" slot="active-icon" :src="item.image[1]"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.image[0]"></image>
</u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
backgroundColor: "#fff",
// MyTabbarState: this.$store.getters.MyTabbarState,
tabbarSet: this.$store.state.tabbarSet,//這里用到了vuex存儲(chǔ)數(shù)據(jù)
};
},
computed: {
MyTabbarState() {
return this.$store.getters.MyTabbarState;
},
},
// watch: {
// MyTabbarState: {
// handler(newVal, oldVal) {
// // console.log('更新', newVal, oldVal)
// },
// deep: true, // 深度監(jiān)聽
// immediate: true, //立即執(zhí)行
// }
// },
methods: {
//選項(xiàng)切換時(shí)
tabbarChange(e) {
console.log('change1', e, this.tabbarSet, this.MyTabbarState);
this.MyTabbarState = e;
this.$store.dispatch('getMyTabbarState', e)
uni.navigateTo({
url: this.tabbarSet.list[e].url
})
}
},
}
</script>
<style lang="scss">
.u-page__item__slot-icon {
width: 41rpx;
height: 44rpx;
}
.myTabbarBox {
position: fixed;
bottom: 0;
left: 0;
z-index: 999999999;
width: 100%;
padding: 30rpx 0;
}
::v-deep.u-tabbar__content {
background-color: transparent;
}
</style>
3.父組件
<template>
<view>
<!-- 底部tabbar -->
<MyTabbar></MyTabbar>
</view>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
let MyTabbarState = 0;
let tabbarSet = {
backgroundColor: "#fff", //背景顏色
activeColor: "#000", //點(diǎn)擊后的字體顏色
inactiveColor: "#D0D0D0", //默認(rèn)字體顏色
list: [{
title: "首頁",
image: ["../../static/previousHome.png", "../../static/backHome.png"],
url: "/pages/index/index"
},
{
title: "我的",
image: ["../../static/previousUser.png", "../../static/backUser.png"],
url: "/pages/order/order"
}
]
};
this.$store.dispatch('getTabbarSet', tabbarSet);
this.$store.dispatch('getMyTabbarState', MyTabbarState);
},
onShow() {
//改變底部導(dǎo)航欄狀態(tài)
this.$store.commit('get_MyTabbarState', 0);
}
}
4.創(chuàng)建store目錄，下面創(chuàng)建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const loginKey = 'login_status'
const vuexStore = new Vuex.Store({
? state: {
? isBtnShow:false,//按鈕節(jié)流
MyTabbarState:1,//操作欄選中狀態(tài)
tabbarSet:{}, // 操作欄數(shù)據(jù)
? },
? mutations: {
// 操作欄數(shù)據(jù)
get_tabbarSet(state, goName){
console.log('MUTATION',goName)
state.tabbarSet = goName;
cookie.set('tabbarSet', goName)
},
//操作欄選中狀態(tài)
get_MyTabbarState(state, goName){
console.log('改變狀態(tài)',goName)
state.MyTabbarState = goName;
cookie.set('MyTabbarState', goName)
}
? },
? actions: {
? //操作欄選中狀態(tài)
? getMyTabbarState({ state, commit }, force) {
commit('get_MyTabbarState',force)
? ? },
// 操作欄數(shù)據(jù)
? getTabbarSet({ state, commit }, force) {
commit('get_tabbarSet',force)
? ? },
changeIsBtnshow({ state, commit }, index) {
? commit('updateIsBtnShow', index)
},
? },
? getters: {
? MyTabbarState:state=>state.MyTabbarState,
? tabbarSet:state => state.tabbarSet,
? isBtnShow:state => state.isBtnShow
? },
? strict: debug,
})
export default vuexStore
