uniapp自定义tabBar_uni.settabbaritem

uniapp自定义tabBar

1、在登录页中获取该用户所有的权限

getAppFrontMenu().then(res=>{
						if(res.length > 0){
							// 把所有权限存入缓存中
							let firstPath = res.reverse()[0].path;
							uni.setStorageSync('qx_data', res);
							uni.switchTab({
								url: firstPath,
							})
							// 方法二 通过uni.setTabBarItem（）中visible属性设置（app端可以微信小程序端不行）
							//setTimeout(()=>{
							//	res.forEach( item => {
							//		uni.setTabBarItem({
							//		    index: item.priority,
							//		    visible: true
							//		})
							//	})
							//}, 500)
						} else {
							uni.switchTab({
								url:"/pages/my/index"
							})
						}
						
					})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2、page.json list添加所有要用到的页面

"tabBar":{
		"color": "#909199",
		"selectedColor": "#FFFFFF",
		"borderStyle": "black",
		"backgroundColor": "#253C8C",
		"list": [
			{
				"pagePath": "pages/index/index"
				// "iconPath": "static/image/tabIcon/home.png",
				// "selectedIconPath": "static/image/tabIcon/home_sel.png",
				// "text": "首页",
				// "visible": false
			},
			{
				"pagePath": "pages/monitor/index"
				// "iconPath": "static/image/tabIcon/yxjk.png",
				// "selectedIconPath": "static/image/tabIcon/yxjk_sel.png",
				// "text": "监控",
				// "visible": false
			},
			{
				"pagePath": "pages/data/data"
				// "iconPath": "static/image/tabIcon/sjfx.png",
				// "selectedIconPath": "static/image/tabIcon/sjfx_sel.png",
				// "text": "数据",
				// "visible": false
			},
			{
				"pagePath": "pages/order/index"
				// "iconPath": "static/image/tabIcon/ywgj.png",
				// "selectedIconPath": "static/image/tabIcon/ywgj_sel.png",
				// "text": "运维",
				// "visible": false
			},
			{
				"pagePath": "pages/my/index"
				// "iconPath": "static/image/tabIcon/my.png",
				// "selectedIconPath": "static/image/tabIcon/my_sel.png",
				// "text": "我的",
				// "visible": true
			}
		]
	},
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

3、在components文件夹中创建tabBer.vue

<template>
	<!-- 自定义tabBar 组件 -->
    <view class="tab-bar">
        <view class="content">
            <view class="one-tab" v-for="(item, index) in infoList" :key="index" @click="selectTabBar(item.pagePath)">
                <view>
                    <view class="tab-img">
                        <image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
                        <image v-else class="img" :src="item.iconPath"></image>
                    </view>
                </view>
                <view :class="['tit', routePath === item.pagePath ? 'sel' : '']">{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        // 当前页面路径
        routePath: {
            type: String,
            required: true
        }
    },
    data() {
        return {
			// 底部导航栏所有数据
			tabBarList:[
				{
					pagePath: "/pages/index/index",
					iconPath: require("../static/image/tabIcon/home.png"),
					selectedIconPath: require("../static/image/tabIcon/home_sel.png"),
					text: "首页"
				},
				{
					pagePath: "/pages/monitor/index",
					iconPath: require("../static/image/tabIcon/yxjk.png"),
					selectedIconPath: require("../static/image/tabIcon/yxjk_sel.png"),
					text: "监控"
				},
				{
					pagePath: "/pages/data/data",
					iconPath: require("../static/image/tabIcon/sjfx.png"),
					selectedIconPath: require("../static/image/tabIcon/sjfx_sel.png"),
					text: "数据"
				},
				{
					pagePath: "/pages/order/index",
					iconPath: require("../static/image/tabIcon/ywgj.png"),
					selectedIconPath: require("../static/image/tabIcon/ywgj_sel.png"),
					text: "运维"
				},
				{
					pagePath: "/pages/my/index",
					iconPath: require("../static/image/tabIcon/my.png"),
					selectedIconPath: require("../static/image/tabIcon/my_sel.png"),
					text: "我的"
				}
			],
			// 当前用户页面权限
			infoList: []
		};
    },
	mounted() {
		// 所有权限 主页面
		let qx_data = uni.getStorageSync('qx_data');
		if(qx_data && qx_data.length > 0){
			qx_data.forEach(item=>{
				this.infoList.push(this.tabBarList[item.priority]);
			})
		}else{
			// 如果没有选页面默认展示'我的'页面
			this.infoList.push(this.tabBarList[4]);
		}
	},
    methods: {
        selectTabBar(path) {
			uni.switchTab({
				url: path
			})
            console.log('path',path);
        }
    }
};
</script>

<style lang="scss" scoped>
.tab-bar {
        position: fixed;
		z-index: 1000;
        bottom: 0;
        left: 0;
        width: 100vw;
        padding: 0rpx;
        padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
        background-color: #253C8C;
		color: #909199;
        padding-top: 12rpx;
        .content {
            display: flex;
            flex-direction: row;
            .one-tab {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                .tab-img {
                    width: 50rpx;
                    height: 50rpx;
                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .tit {
                    font-size: 25rpx;
                    transform: scale(0.7);
                }
				.sel {
					color: #FFFFFF;
				}
            }
        }
    }
</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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

4、在每个主页面中使用（pages/index/index.vue）导入 注册 使用 其他主页面同理 只需替换每个页面的routePath

<!-- 自定义tabBar -->
<tabBer routePath="/pages/index/index"/>
import tabBer from '@/components/tabBer.vue'; 
components: {
			// #ifdef MP-WEIXIN
			circleProgress,
			// #endif
			// #ifdef APP-PLUS
			updatedVersion,
			// #endif
			selectpopup,
			areaweather,
			tabBer
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5、在最后App.vue中

onShow: function() {
		// 将默认的原生tabbar隐藏 
		uni.hideTabBar();
	},
1
2
3
4