uniapp+uview2.0+vuex实现自定义tabbar组件

效果图

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存储数据
			};
		},
		computed: {
			MyTabbarState() {
				return this.$store.getters.MyTabbarState;
			},
		},
		// watch: {
		// 	MyTabbarState: {
		// 		handler(newVal, oldVal) {
		// 			// console.log('更新', newVal, oldVal)
		// 		},
		// 		deep: true, // 深度监听
		// 		immediate: true, //立即执行
		// 	}
		// },
		methods: {
			//选项切换时
			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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

3.父组件

<template>
	<view>
		
		<MyTabbar>MyTabbar>
	view>
	template>
	<script>
	export default {
		data() {
			return {
			}
			},
			mounted() {
			let MyTabbarState = 0;
				let tabbarSet = {
				backgroundColor: "#fff", //背景颜色
				activeColor: "#000", //点击后的字体颜色
				inactiveColor: "#D0D0D0", //默认字体颜色
				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() {
			//改变底部导航栏状态
			this.$store.commit('get_MyTabbarState', 0);
		}
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

4.创建store目录，下面创建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,//按钮节流
	MyTabbarState:1,//操作栏选中状态
	tabbarSet:{},	// 操作栏数据
  },
  mutations: {
	// 操作栏数据
	get_tabbarSet(state, goName){
		console.log('MUTATION',goName)
		state.tabbarSet = goName;
		 cookie.set('tabbarSet', goName)
	},
	//操作栏选中状态
	get_MyTabbarState(state, goName){
		console.log('改变状态',goName)
		state.MyTabbarState = goName;
		 cookie.set('MyTabbarState', goName)
	}
  },
  actions: {
	  //操作栏选中状态
	  getMyTabbarState({ state, commit }, force) {
		commit('get_MyTabbarState',force)
    },
	// 操作栏数据
	  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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50