ec.uniapp-master/components/lf-tabbar/lf-tabbar.vue

<template>
	<view>
		<lf-tabbar-box :value="currentTabBar" 
		  v-if="isShowTabBar" 
		  :close-animate-on-raisede="false">
		  <lf-tabbar-item v-for="item in tabbars"
			  :key="item.name"
			  :name="item.name"
			  :icon="item.icon"
			  :dot="item.dot"
			  :info="item.info"
			  :path="item.path"
			  :raisede="item.raisede"
			  :style="{'width': 100 / tabbars.length +'%'}"
			  @click="handleClick"
			  icon-prefix="icon">
			  {{ item.text }}
			</lf-tabbar-item>
		</lf-tabbar-box>
	</view>
</template>

<script>
	import lfTabbarBox from "./lf-tabbar-box.vue"
	import lfTabbarItem from "./lf-tabbar-item.vue"
	import { mapGetters } from "vuex";
	
	export default {
		name: 'lf-tabbar',
		components: {
			lfTabbarBox,
			lfTabbarItem
		},
		props: {
			type: {
				type: String, // 默认跳转方式redirect，可选switch
				default: 'redirect'
			}
		},
		computed: {
			...mapGetters(['currentTabBar', 'tabbars', 'isShowTabBar'])
		},
		created(){
			// 组件被创建时检查当前在哪个页面，然后校验currentTabBar是否与之匹配
			let pages = getCurrentPages();
			let page = pages[pages.length - 1].route;
			let tabbar_name = '';
			this.tabbars.map(item => {
				if(item.path == '/'+ page){
					tabbar_name = item.name;
				}
			})
			if(tabbar_name != this.currentTabBar){
				this.$store.commit('setCurrentTabBar', tabbar_name);
			}
		},
		methods: {
			handleClick (options) {
			  this.$store.commit('setCurrentTabBar', options.name);
			  this.$url(options.path, {type: this.type});
			}
		}
	}
</script>

<style>
</style>