小程序自定义tabbar，不同用户显示不同页面

前言

当我们拿到一个小程序项目，官方tabbar足够我们使用，但跟着业务有所增加，我们前端也不得不跟着改变。因为业务需求，我这个小程序分成了用户端和管理端两端，相对应使用权限也不同，因此tabbar所跳转页面也不同

管理端

 

 用户端

 做了很多功课，最终选择了自定义tabbar，下面介绍我的做法

1，新建一个tabbar.vue

tabbar.vue页面

 

<template>
    <block>
        <view v-for="(item,index) in tabList" :key="index" class="navigator"
            :class="currentTabIndex == index ? 'on' : ''" @click="switchTab1(index)">
            <view class="icon">
                <text class="iconfont" :class="item.icon"
                    :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text>
                <text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text>
            </view>
            <view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">
                {{item.text}}</view>
        </view>
    </block>

</template>

script

<script>
	export default {
		data() {
			return {
               //需要跳转的路径和text
				tabList: [{
						page: '../../pages/index/index',
						text: '看板',
					},
					{
						page: '../../pages/index/manage/manage',
						text: '管理',
					},
					{
						page: '../../pages/index/my/my',
						text: '我的',
					}

				],
				currentTabIndex: this.current
			}
		},
		props: {
			current: {
				type: [Number, String],
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#fbfbfb'
			},
           //默认tabbar文字颜色
			color: {
				type: String,
				default: '#999'
			},
           //点击tabbar文字颜色
			tintColor: {
				type: String,
				default: '#42b983'
			}
		},
		methods: {
          //点击事件 ，点击text跳转相对应的路径
			switchTab1(index) {
				this.currentTabIndex = index
				this.$emit('click', index)
				uni.redirectTo({
					url: this.tabList[index].page
				})

			}
		},
	}
</script>

2.在main.js中添加

 

 3，在页面中使用

3.1   在index页面引入我们写好的tabbar组件

 3.2   在index页面中添加

<tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#1B82D2"
			@click="tabClick"></tab-bar>

 

 3.3，在methods添加事件

	tabClick(index) {
				// console.log('返回tabBar索引：' + index)
				this.currentTabIndex = index
			},

 3.4 这样一个自定义tabbar就完成了，最后可以根据所需添加样式