uniapp开发微信小程序之自定义底部导航栏_uniapp微信小程序自定义导航栏

实现效果：登录之后，能根据不同角色展示不同的tabbar
步骤一：创建一个文件夹，这里是在根目录下创建了components文件夹，在components文件夹中创建了tabBar.vue文件。list 的 格式一定要与 pages.json 中的 tabBar 格式保持一致。代码如下：

<template>
    <view class="tab-bar">
        <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
			<image v-if="routePath == item.pagePath" class="tab_img" :src="item.selectedIconPath"></image>
			<image v-else class="tab_img" :src="item.iconPath"></image>
            <view class="tab_text" :style="{color: routePath == item.pagePath ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
</template>

<script>
    export default {
		props: {
		        // 当前页面路径
		        routePath: {
		            type: String,
		            required: true
		        }
		    },
        data() {
            return {
                color: "#666666",
                selectedColor: "#2E82F7",
                list: [],
				isSelect: false
            }
        },
        created() {  
           // 这里区分角色是通过userRole，登录接口返回的，有两个角色：餐厅和顾客
			console.log(uni.getStorageSync('userRole'))
            var _this = this
            if (uni.getStorageSync('userRole') == 1) {
                // 餐厅
                _this.list = [{
						"pagePath": "/pages/dishes/index", //地址
						"text": "菜品", //文本
						"iconPath": "/static/image/tabBar/dishes.png", //未选中图标
						"selectedIconPath": "/static/image/tabBar/dishes-active.png" //选中图标
					},
					{
						"pagePath": "/pages/order/order", //地址
						"text": "订单", //文本
						"iconPath": "/static/image/tabBar/order.png", //未选中图标
						"selectedIconPath": "/static/image/tabBar/order-active.png" //选中图标
					}
				]
            } else {
                // 顾客
                _this.list = [
					{
						"pagePath": "/pages/menu/menu", //地址
						"text": "菜单", //文本
						"iconPath": "/static/image/tabBar/menu.png", //未选中图标
						"selectedIconPath": "/static/image/tabBar/menu-active.png" //选中图标
					},
					{
						"pagePath": "/pages/my/my", //地址
						"text": "我的", //文本
						"iconPath": "/static/image/tabBar/my.png", //未选中图标
						"selectedIconPath": "/static/image/tabBar/my-active.png" //选中图标
					}
                ]
            }
        },
        methods: {
            switchTab(item, index) {
				console.log(' _this.list', this.list)
                let url = item.pagePath;
				wx.switchTab({
					url: url
				})
            }
        }
    }
</script>

<style lang="scss">
    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 140rpx;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

        .tab-bar-item {
            flex: 1;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .tab_img {
                width: 54rpx;
                height: 50rpx;
            }
            .tab_text {
                font-size: 26rpx;
                margin-top: 9rpx;
            }
        }
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

步骤二：pages.json 中 tabBar 的 list 写法如下

"tabBar": {
		"color": "#999999",
		"selectedColor": "#297FF7",
		"fontSize": "32px",
		"list": [{
		            "pagePath": "pages/dishes/index"
		        },
		        {
		            "pagePath": "pages/order/order"
		        },
		        {
		            "pagePath": "pages/menu/menu"
		        },
		        {
		            "pagePath": "pages/my/my"
		        }
		    ]
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

步骤三：main.js中注册

import tabBar from 'components/tabBar.vue'
// 注册tabBar为全局组件
Vue.component('tabBar',tabBar)

1
2
3
4

步骤四：引用，在需要底部导航栏的页面中引用

<template>
 // routePath是给子组件传参，一定要写，否则容易跳的页面是你上一个点击图标对应的页面，routePath传的当前页面的地址，pages前一定要带 / ，代表绝对地址
  <tabBar routePath = '/pages/dishes/index'></tabBar>
</template>
<script>
	export default {
		data() {
			return {
				
			};
		},
		onShow() {
		  // 隐藏掉自带的底部导航栏
			uni.hideTabBar({});
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

最后，如果一个页面，有多个角色都用到，但是tabBar是不同的，建议引用的时候加一个判断，否则频繁切换不同的角色，可能会出现页面内容变换了，但是tabBar没变换的情况；这种情况不知道是不是缓存的问题，也可以试试用 vuex 存储 list ，看能不能解决这个问题。我就太懒了，就直接加了个判断。代码如下：

<template>
  <tabBar v-if="userRole == 1" routePath = '/pages/dishes/index'></tabBar>
  <tabBar v-if="userRole == 2" routePath = '/pages/dishes/index'></tabBar>
</template>
<script>
	export default {
		data() {
			return {
				userRole : ''
			};
		},
		onShow() {
		  // 隐藏掉自带的底部导航栏
			uni.hideTabBar({});
			this.userRole = uni.getStorageSync('userRole')
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18