uni-app中自定义TabBar

1.由于原生的tabBar不能做到事件的拦截处理所以才自定义

注意点：自定义tabBar后则原生的uni.switchTab(OBJECT)不能再使用了

第一步：需要把原生的tabBar注释掉

第二步：在components下新建TabBar.vue文件（那个页面用那个页面引入）

2.这里是四个页面使用

index.vue   首页

<template>
    <view class='index'>
        <TabBar cureentPage='index'></TabBar>
	</view>
</template>
<script>
    import TabBar from '@/components/TabBar.vue'
    export default {
        components:{TabBar}
    }
</script>

list.vue  分类页面

<template>
    <view class='list'>
        <TabBar cureentPage='list'></TabBar>
	</view>
</template>
<script>
    import TabBar from '@/components/TabBar.vue'
    export default {
        components:{TabBar}
    }
</script>

shopcart   购物车页面

<template>
    <view class='shopcart'>
        <TabBar cureentPage='shopcart'></TabBar>
	</view>
</template>
<script>
    import TabBar from '@/components/TabBar.vue'
    export default {
        components:{TabBar}
    }
</script>

my.vue   我的页面

<template>
    <view class='my'>
        <TabBar cureentPage='my'></TabBar>
	</view>
</template>
<script>
    import TabBar from '@/components/TabBar.vue'
    export default {
        components:{TabBar}
    }
</script>

TabBar.vue组件中

<template>
	<view class='tabbar'>
		<view 
			class='tab' 
			v-for="(item,index) in tabbarList" 
			:key='index'
			@tap='navigatorTo(item.pagePath)'
		 >
			<image v-if=' item.pagePath === cureentPage ' :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class='text'>{{item.text}}</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		cureentPage:{
			type:String,
			default:'index'
		}
	},
	data () {
		return {
			tabbarList:[
				{
					"pagePath": "index",
					"iconPath":"/static/tabbar/index.png",
					"selectedIconPath":"/static/tabbar/indexSelected.png",
					"text": "首页"
				}, 
				{
					"pagePath": "list",
					"iconPath":"/static/tabbar/list.png",
					"selectedIconPath":"/static/tabbar/listSelected.png",
					"text": "分类"
				},
				{
					"pagePath": "shopcart",
					"iconPath":"/static/tabbar/shop.png",
					"selectedIconPath":"/static/tabbar/shopSelected.png",
					"text": "购物车"
				},
				{
					"pagePath": "my",
					"iconPath":"/static/tabbar/my.png",
					"selectedIconPath":"/static/tabbar/mySelected.png",
					"text": "我的"
				}
			]
		}
	},
	methods:{
		navigatorTo(e){
             //如果去购物车或者我的页面需要判断是否登录
			if(  e==='shopcart'  ||  e==='my' ){
				this.navigateTo({
					url:`../../pages/${e}/${e}`,
					animationType:"fade-in",
					animationDuration:0
				})
			}else{
				uni.redirectTo({
					url:`../../pages/${e}/${e}`
				})
			}
		}
	}
}
</script>

<style scoped>
.tabbar{
	border-top:2rpx solid #636263;
	background-color: #FFFFFF;
	z-index: 9999;
	position: fixed;
	left:0;
	bottom:0;
	width:100%;
	height: 120rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.tab{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
image{
	width: 40rpx;
	height: 40rpx;
}
.text{
	padding:10rpx 0;
	font-size:24rpx;
}
</style>

在main.js中判断了是否登录

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

import store from 'store'
Vue.prototype.$store = store;

//权限跳转
Vue.prototype.navigateTo = (options)=>{
	if( !store.state.user.loginStatus ){   //这里是vuex中user模块下state中loginStatus的登录状态（默认值为未登录false）
		uni.showToast({
			title:"请先登录",
			icon:"none"
		})
		return	uni.navigateTo({
				url:"/pages/login/login"
			})
	}
	uni.redirectTo(options)
}
				
App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()