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

效果图

1.在components文件夹中新建MyTabbar组件

2.组件代码

html 复制代码
<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>

3.父组件

html 复制代码
<template>
	<view>
		<!-- 底部tabbar -->
		<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);
		}
			}

4.创建store目录,下面创建index.js文件

html 复制代码
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
相关推荐
前端大白话7 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
前端大白话10 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村16 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg501720 分钟前
Vue回调函数中的this
前端·javascript·vue.js
程序猿大波22 分钟前
基于Java,SpringBoot,Vue,HTML宠物相亲配对婚恋系统设计
java·vue.js·spring boot
前端太佬22 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200433 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
纪元A梦1 小时前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生1 小时前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了1 小时前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae