小程序自定义tabbar导航栏及动态控制tabbar功能实现方法(uniapp)

	"tabBar": {
		// "custom": true,
		"list": [{
				"pagePath": "pages/home/index"
			},
			{
				"pagePath": "pages/personal/index"
			},
			{
				"pagePath": "pages/personal/notMemberIndex"
			}
		]
	}

// 已登录
const member = [{
		"text": "首页",
		"pagePath": "/pages/home/index",
		"iconPath": require("@/static/home.png"),
		"selectedIconPath": require("@/static/homeSelect.png")
	},
	{
		"text": "个人中心",
		"pagePath": "/pages/personal/index",
		"iconPath": require("@/static/personal.png"),
		"selectedIconPath": require("@/static/personalSelect.png")
	}
]

// 未登录
const notMember = [{
		"text": "山姆会员商城",
		"pagePath": "/pages/home/index",
		"iconPath": require("@/static/home.png"),
		"selectedIconPath": require("@/static/homeSelect.png")
	},
	{
		"text": "成为会员",
		"pagePath": "/pages/personal/notMemberIndex",
		"iconPath": require("@/static/notMember.png"),
		"selectedIconPath": require("@/static/notMemberSelect.png")
	}
]

export default {
	member,
	notMember
}

import tarBarUserType from '@/utils/tabBar.js';

const tabBar = {
	state: {
		// 判断是否已登录(member/notMember)
		isMemberType: '',
		// tabbar列表数据
		tabBarList: []

	},
	mutations: {
		setType(state, isMemberType) {
			state.isMemberType = isMemberType;
			state.tabBarList = tarBarUserType[isMemberType];
		}
	}
}

export default tabBar;

const getters = {
	tabBarList: state => state.tabBar.tabBarList,
	isMemberType: state => state.tabBar.isMemberType,
}
export default getters

<template>
	<view class="tab-bar">
		<view class="content">
			<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
				<view>
					<view class="tab-img">
						<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
						<image v-else class="img" :src="item.iconPath"></image>
					</view>
				</view>
				<view class="tit">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 底部导航栏数据
		tabBarList: {
			type: Array,
			required: true
		},
		// 当前页面路径
		routePath: {
			type: String,
			required: true
		}
	},
	data() {
		return {};
	},
	methods: {
		selectTabBar(path) {
			this.$emit('onTabBar', path)
		}
	}
};
</script>

<style lang="scss">
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 20rpx;
	padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	background-color: #fff;

	.content {
		display: flex;

		.one-tab {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50%;

			.tab-img {
				width: 50rpx;
				height: 50rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.tit {
				font-size: $font-size-base;
				transform: scale(0.7);
			}
		}
	}
}
</style>

import { mapGetters } from 'vuex';

computed: {
	// 这里的tabBarList就是数据源，直接使用传值
	...mapGetters(['tabBarList'])
},

// 存储用户信息
setUserWxInfo(userInfo);
// 调用上文vuex，member就是已登录的标识
that.$store.commit('setType', 'member');

onShow() {
		uni.hideTabBar({});
		if (getUserWxInfo('user_info')) {
			this.$store.commit('setType', 'member');
		} else {
			this.$store.commit('setType', 'notMember');
		}
	}