uniapp动态更新TabBar

• uniapp官方的tabbar提供了uni.setTabBarItem等动态更新的方法，并且说明中提到适用于微信小程序。
• 但是经过很多人的测试，uni.setTabBarItem等方法在微信小程序中并不完全生效，所以需要使用到自定义TabBar。
• 自定义TabBar在本文中其实只是一种思路，将一个页面作为基础页面，绘制TabBar，业务功能页面作为组件进行切换显示，详细代码如下：

基础页面

<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			
			<index v-if="PageCur=='home'"></index>
			
			<work v-else-if="PageCur=='work'"></work>
			<mine v-else-if="PageCur=='mine'"></mine>
			
		</view>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view v-for="item in tabBarItemList" class="action" @click="NavChange" :data-cur="item.name">
				<view class='cuIcon-cu-image'>
				<!-- 这里展示图标，点击后图标为未点击图标加 _ -->
					<image :src="item.imgPath + [PageCur==item.name?'_':''] + '.png'"></image>
				</view>
				<view :class="PageCur==item.name?'text-blue':'text-gray'">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>	
	import index from '@/pages/index/index.vue'
	import work from '@/pages/work/index.vue'
	import mine from '@/pages/mine/index.vue'
	export default {
		components:{
			index,
			work,
			mine
		},
		data() {
		return {
				PageCur: 'home',
				tabBarItemList: []
			}
		},
		mounted() {
			// this.tabBarItemList = getApp().globalData.tabBarItemList
			this.tabBarItemList = [
					{
						"name": "home",
						"text": "首页",
						"imgPath": "/static/images/tabbar/home",
					},
					{
						"name": "work",
						"text": "工作台",
						"imgPath": "/static/images/tabbar/work",
					},
					{
						"name": "mine",
						"text": "我的",
						"imgPath": "/static/images/tabbar/mine",
					},
				]
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

<style>

</style>

在需要使用动态更新的时候，只需要更新tabBarItemList的值即可，十分方便且轻量

PS: 我这里的组件引入方式非 easycom 引入，若使用 easycom把页面放到@/components直接调用即可