当前位置：首页 > news >正文

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

news 2025/8/26 0:33:24

效果图
在这里插入图片描述

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>

3.父组件

<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文件

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

查看全文

http://www.lryc.cn/news/224588.html