uni-app开发微信小程序自定义tabbar栏和根据不同角色展示不同的tabbar栏

原文链接
在网上找别人的方法,加以修改


1.新建custom-tarbar.vue页面

<template>
	<view class="tarbar">
		<view class=".tarbar-list" :style="{
                background: tabBar.backgroundColor,
                color: tabBar.color,
                'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
                'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
            }">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" :class="item.isShow == true ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list"
				 :key="index" @click.top="setSelected(index)">
					<block v-if="item.isShow == false">
						<view class="tarbar-list-li-icon">
							<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
						</view>
						<view :class="selected == index?'tarbar-list-li-name act':'tarbar-list-li-name'">{{ item.text }}</view>
					</block>
					<block v-else>
						<view style="width: 120rpx;height: 120rpx;" class="tarbar-list-li-icon">
							<image style="width: 120rpx;height: 120rpx;" :src="item.selectedIconPath" mode=""></image>
						</view>

					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
                 // 组件传值（selected）索引对应默认从0开始
		props: ['selected'],
		data() {
			return {
				isshow: 1,
				tabBar: {
					color: '#333',
					selectedColor: '#E84351',
					borderStyle: '#ccc',
					backgroundColor: '#fff',
					position: 'bottom',
					list: [{
							pagePath: '/pages/tabbar/tabbar-1/tabbar-1',
							iconPath: '/static/img/tabbar/home.png',
							selectedIconPath: '/static/img/tabbar/homeactive.png',
							text: '招聘大厅',
							isShow: false,
						},
						// {
						// 	pagePath: '/pages/tabbar/tabbar-2/tabbar-2',
						// 	iconPath: '/static/img/tabbar/guanzhu.png',
						// 	selectedIconPath: '/static/img/tabbar/guanzhuactive.png',
						// 	text: '人才推荐',
						// },
						// {
						// 	pagePath: '/pages/tabbar/tabbar-3/tabbar-3',
						// 	iconPath: '',
						// 	selectedIconPath: '/static/img/tabbar/add.png',
						// 	text: '发布',
						// 	isShow: true,
						// },
						{
							pagePath: '/pages/tabbar/tabbar-4/tabbar-4',
							iconPath: '/static/img/tabbar/news.png',
							selectedIconPath: '/static/img/tabbar/newsactive.png',
							text: '消息',
							isShow: false,
						},
						{
							pagePath: '/pages/tabbar/tabbar-5/tabbar-5',
							iconPath: '/static/img/tabbar/me.png',
							selectedIconPath: '/static/img/tabbar/meactive.png',
							text: '我的',
							isShow: false,
						}
					]
				},
			};
		},
		onLoad() {

		},
		mounted() {
			if (this.isshow == 1) {
				this.tabBar.list.splice(1, 0, {
					pagePath: '/pages/tabbar/tabbar-2/tabbar-2',
					iconPath: '/static/img/tabbar/guanzhu.png',
					selectedIconPath: '/static/img/tabbar/guanzhuactive.png',
					text: '人才推荐',
					isShow: false,
				}, {
					pagePath: '/pages/tabbar/tabbar-3/tabbar-3',
					iconPath: '',
					selectedIconPath: '/static/img/tabbar/icon-postJob.png',
					text: '发布',
					isShow: true,
				})
			}
		},
		methods: {

			setSelected(index) {
				console.log(index);
				uni.switchTab({
					url: this.tabBar.list[index].pagePath
				});
			},
		}
	};
</script>

<style>
	.tarbar {
		width: 100%;
		z-index: 9999;
		position: fixed;
	}

	.tarbar-list {
		width: 100%;
		height: 100upx;
		background: #DFDFDF;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.tarbar-list-ul {
		width: 100%;
		height: 100%;
		/* padding-top: 20upx; */
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
	}

	.tarbar-list-li {
		/* width: 80upx;
		height: 80upx; */
	}

	.tarbar-list-li-icon {
		width: 56upx;
		height: 56upx;
		margin: 0 auto;
	}

	.tarbar-list-li-icon image {
		width: 56upx;
		height: 56upx;
	}

	.tarbar-list-li-name {
		width: 100%;
		text-align: center;
		line-height: 30upx;
		font-size: 20upx;
		height: 30upx;
	}

	.act {
		color: #007AFF;
	}

	.tarbar-list-li-center {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 80rpx;
	}

	.tarbar-list-li-center .tarbar-list-li-icon,
	.tarbar-list-li-center .tarbar-list-li-icon image {
		width: 90upx;
		height: 60upx;
	}
</style>

2.创建tabbar栏相关的页面 tabbar-1.vue

<template>
    <view class="content">
        <custom-tarbar :selected="0"></custom-tarbar>
        <view class="home">
            招聘大厅
        </view>
    </view>
</template>

<script>
//引入上面的组件
import customTarbar from '../../custom-tabbar.vue';
export default {
    components: {
        'custom-tarbar': customTarbar
    }
};
</script>

<style>
.content {
    width: 100%;
}
</style>

创建tabbar-4.vue页面

<template>
    <view class="content">
        <custom-tarbar :selected="selected"></custom-tarbar>
        <view class="home">
           消息
        </view>
    </view>
</template>

<script>
import customTarbar from '../../custom-tabbar.vue';
export default {
    components: {
        'custom-tarbar': customTarbar
    },
	data(){
		return{
			isshow:1,
			selected:3,
		}
	},
	mounted() {
		// 根据不同的状态来动态的绑定selected值
		if(this.isshow==1){
			this.selected=3
		}
		if(this.isshow==2){
			this.selected=1
		}
	}
};
</script>

<style>
.content {
    width: 100%;
}
</style>