自定义tabBar

使用sass语言

<template>
	<view class="tabBar">
		<view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item" :class="{'active':item.url == currentPage}"
		 @click="navTo(item,index)">
			<image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
			<image v-else :src="item.imgNormal" mode=""></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		// props: {
		// 	currentPage: {
		// 		type: String,
		// 		default: 'index'
		// 	}
		// },
		data() {
			return {
				tabBar: [{
						url: '../../../pages/bringIn/index/index',
						text: '首页',
						imgNormal: '../../static/image/tabbar/index.png',
						imgClick: '../../static/image/tabbar/indexed.png'
					},
					{
						url: '../../../pages/bringIn/news/news',
						text: '消息',
						imgNormal: '../../static/image/tabbar/new.png',
						imgClick: '../../static/image/tabbar/newed.png'
					},{
						url: '../../../pages/bringIn/jobFair/jobFair',
						text: '招聘会',
						imgNormal: '../../static/image/tabbar/job.png',
						imgClick: '../../static/image/tabbar/jobed.png'
					}, {
						url: '../../../pages/bringIn/my/my',
						text: '我的',
						imgNormal: '../../static/image/tabbar/my.png',
						imgClick: '../../static/image/tabbar/myed.png'
					}
				],
				level: '',
				currentPage:''
			};
		},
		mounted() {
			// let userlevel = uni.getStorageSync('level');
			//  console.log(userlevel); 
			// let _this = this;
			// if (userlevel == 1) {
			// 	_this.tabBar.splice(3, 1);
			// } else {
			// 	_this.tabBar.splice(1, 1);
			// 	_this.tabBar.splice(1, 1);
			// }
		},
		created() {
			uni.hideTabBar({})
		},
		computed: {
			currentPage8:function(e){
				var pages=getCurrentPages();
				var currentPage = pages[pages.length - 1];  //获取当前页面的对象
				this.currentPage = "../../../"+currentPage.route;  //当前页面url
				
				return ("../../../"+this.currentPage)
			}
		},
		methods: {
			navTo(item, index) {
				let _this = this;
				var pages=getCurrentPages();
				var currentPage = pages[pages.length - 1];  //获取当前页面的对象
				_this.currentPage = currentPage.route;  //当前页面url
				
				if (item.url !== ("../../../"+_this.currentPage)) {
					uni.navigateBack({ delta: pages.length - 6})
					// for(var i=0;i<pages.length;i++)
					// {
					// 	if("../../../"+pages[i].route == item.url)
					// 	{
					// 		console.log(pages[i].route);
					// 		uni.navigateBack({
					// 			url:pages[i].route
					// 		});
							
					// 		return;
					// 	}
					// }
					
					var url = `${item.url}`;
					uni.redirectTo({
						url:url
					})
					
					// uni.navigateTo({
					// 	url: url
					// })
				} else {
					/* this.$parent.toTop() */
				}
			} 
		}
	}
</script>

<style lang="scss" scoped>
	//导航栏设置
	$isRadius:20upx; //左上右上圆角
	$isWidth:100vw; //导航栏宽度
	$isBorder:1px solid #eeeeee; //边框 不需要则设为0px
	$isBg:white; //背景

	// 选中设置
	$chooseTextColor:#61c69a; //选中时字体颜色
	$chooseBgColor:white; //选中时背景颜色 transparent为透明

	//未选中设置
	$normalTextColor:#bababa; //未选中颜色

	.tabBar {
		width: $isWidth;
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 998;
		background-color: $isBg;
		color: $normalTextColor;
		border-left: $isBorder;
		border-top: $isBorder;
		border-right: $isBorder;
		display: flex;
		justify-content: space-around;
		border-top-right-radius: $isRadius;
		border-top-left-radius: $isRadius;
		box-sizing: border-box;
		overflow: hidden;

		.tabbar_item {
			width: 25%;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.active {
				/* border-left: $isBorder;
	                border-top: $isBorder; */
				background: $chooseBgColor;
				color: $chooseTextColor;
			}
		}

		image {
			width: 60upx;
			height: 60upx;
			margin-left: 5upx;
		}
	}
</style>

页面引用方式

<tabBar :currentPage="currentPage"></tabBar>

import tabBar from '../../../common/tabBar/bringTabBar.vue';

components: {
			tabBar
		},