uniApp自定义tabBar导航_uniapp tabbar 多行导航

新建组件tabbar组件

自定义一个tabbar导航，动态tabbar导航，在需要tabbar的页面引入tabbar组件，跳转到不同系统有不同tabbar导航我这里是后端设置字段控制的，ios和android进入不同系统。

// An highlighted block
<template>
	<view class="tab-bar-box">
		<view class="tab-bar">
			<view class="content">
				<view class="one-tab" v-for="(item, index) in tabBarList" :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">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import {appNavBer,shopNavber} from '@/config/tabBar.js';
export default {
	props: {
		// 当前页面路径
		routePath: {
			type: String,
			required: true
		},
	},
	data() {
		return {
			tabBarList: [],
			appNavBer: appNavBer,
			shopNavber: shopNavber,
		};
	},
	created() {
		if (this.$appName == 'app') {
			this.tabBarList = this.appNavBer
		} else {
			this.tabBarList = this.shopNavber
		}
	},
	
	methods: {
		selectTabBar(path) {
			if (path==this.routePath) return
			if (this.$appName == 'app') {
				uni.switchTab({
					url:path
				})
			} else {
				uni.reLaunch({
					url: path
				})
			}
		}
	}
};
</script>

<style lang="less">
	.tab-bar-box {
		height: 100rpx;
	}
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 20rpx;
	padding-bottom: 0;
	padding-bottom: 0;
	background-color: #fff;

	.content {
		display: flex;

		.one-tab {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50%;

			.tab-img {
				width: 50rpx;
				height: 50rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.tit {
				font-size: 24rpx;
				transform: scale(0.7);
			}
		}
	}
}
</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

在父组件中使用

引入父组件中

<template>
	<view>
		<tabbar routePath="/pages/index/index"></tabbar>
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			tabbar,
		},
		onLoad() {
			//隐藏原有tabbar
			uni.hideTabBar()
			
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18