[uniapp]使用uview组件自定义tabbar_页面切换

封装组件

在components文件夹里新增一个tabbar组件,需要注意tabbar之间的切换需要使用uni.switchTab，从非tabbar界面跳转到tabbar界面可以用uni.switchTab或者uni.reLaunch其他如navigateTo不能用于跳转tabbar界面.

<template>
	<view class="content">
		<u-tabbar :value="currentTab" :fixed="true" :placeholder="false" >
			<u-tabbar-item @click="click1">
				<div class="tabbar-icon" slot="active-icon">
					<u-icon name="file-text-fill" size="30" color="#fff"></u-icon>
				</div>
				<u-icon slot="inactive-icon" name="file-text" size="30" color="#259C77"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item @click="click1">
				<div class="tabbar-icon" slot="active-icon">
					<u-icon name="coupon-fill" size="30" color="#fff"></u-icon>
				</div>
				<u-icon slot="inactive-icon" name="coupon" size="30" color="#259C77"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item @click="click1">
				<div class="tabbar-icon" slot="active-icon">
					<u-icon name="account-fill" size="30" color="#fff"></u-icon>
				</div>
				<u-icon slot="inactive-icon" name="account" size="30" color="#259C77"></u-icon>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: 'tabbar',
		props:['currentTab'],
		data() {
			return {
				switchTab: [
					"/pages/index/index",
					"/pages/index/gcashOrder",
					"/pages/index/my",
				]

			}
		},
		methods: {
			click1(e) {
				uni.switchTab({
					url: this.switchTab[e]
				})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tabbar-icon {
		width: 86rpx;
		height: 86rpx;
		background: #259C77;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</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

组件调用

在需要用到tabbar的页面引入组件

<tabbar :currentTab='0'/>
1

如果是在app里用需要在调用页面里隐藏原生tabbar uni.hideTabBar()(在App.vue配置不生效不知道为什么)

配置文件

在page.json文件里新增tabbar配置文件

"tabBar": {
		"custom":true,
		"list": [{
			"pagePath": "pages/index/index"
		}, {
			"pagePath": "pages/index/gcashOrder"
		},
		{
			"pagePath": "pages/index/my"
		}]
	}
1
2
3
4
5
6
7
8
9
10
11

这样以后就可以使用了，效果如下