uniapp自定义tabbar封装以及解决闪烁问题_uni-app+uview自定义导航栏,页面切换时会出现底部导航栏抖动问题

单纯写个自定义tabbar，在页面切换时会闪烁，所以我们写个自定义tabbar，同时也添加官方的tabbar，但将官方tabbar隐藏掉，通过官方tabbar跳转页面就不会出现闪烁问题，但是第一次加载页面的时候也会有闪烁问题，这个官方有说明

自定义tabbar里

/**
 * 底部自定义导航
 * */
<template>
	<view class="tab">
		<view class="navView" @tap="switc('/pages/home/index/index')">
			<image :src="tabname=='home'?'/static/image/homeAc.png':'/static/image/home.png'" class="navView-img"/>
			<view :class="tabname=='home'?'tabTextActive':'tabText'">首页</view>
		</view>
		<view class="navView" @tap="switc('/pages/workOrder/index/index')">
			<image :src="tabname=='workOrder'?'/static/image/workOrderAc.png':'/static/image/workOrder.png'" class="navView-img"/>
			<view :class="tabname=='workOrder'?'tabTextActive':'tabText'">工单</view>
		</view>
		<view class="navMessage">
			<view class="navMessage-box">
				<image src="/static/image/message.png" class="navMessage-img"></image>
			</view>
		</view>
		<view class="navView" @tap="switc('/pages/setType/index/index')">
			<image :src="tabname=='setType'?'/static/image/setTypeAc.png':'/static/image/setType.png'" class="navView-img"/>
			<view :class="tabname=='setType'?'tabTextActive':'tabText'">排版</view>
		</view>
		<view class="navView" @tap="switc('/pages/my/index/index')">
			<image :src="tabname=='my'?'/static/image/myAc.png':'/static/image/my.png'" class="navView-img"/>
			<view :class="tabname=='my'?'tabTextActive':'tabText'">我的</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"tabbar",
		props:{
			//当前页
			tabname:{
				type:String,
				default:'home'
			}
		},
		data(){
			return{

			}
		},
		methods:{
			//通过官方tabbar跳转页面
			switc(val){
				if(!val)return;
				uni.switchTab({
					url:val
				})
			}
		}
	}
</script>

<style scoped>
	.tab{
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		z-index: 1;
		align-items: center;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
	}
	.navView{
		flex: 1;
		text-align: center;
		font-size: 0;
	}
	.navView-img{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 6rpx;
	}
	.tabText{
		font-size: 26rpx;
		color: #999;
	}
	.tabTextActive{
		font-size: 26rpx;
		color: #333333;
	}
	.navMessage{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 10rpx;
	}
	.navMessage-img{
		width: 60rpx;
		height: 60rpx;
	}
	.navMessage-box{
		width: 110rpx;
		height: 110rpx;
		background:linear-gradient(to bottom right, #ffc528 0%, #ff8054 100%);
		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
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

pages.json里

"tabBar": {
	"list":[
		{
			"pagePath": "pages/home/index/index",
			"iconPath": "/static/image/home.png",
			"selectedIconPath": "/static/image/homeAc.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/workOrder/index/index",
			"iconPath": "/static/image/home.png",
			"selectedIconPath": "/static/image/homeAc.png",
			"text": "工单"
		},
		{
			"pagePath": "pages/setType/index/index",
			"iconPath": "/static/image/home.png",
			"selectedIconPath": "/static/image/homeAc.png",
			"text": "排版"
		},
		{
			"pagePath": "pages/my/index/index",
			"iconPath": "/static/image/home.png",
			"selectedIconPath": "/static/image/homeAc.png",
			"text": "我的"
		}
	]
}
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

app.vue里，在这或许还不能够隐藏掉tabbar，uniapp会有点bug，还需要在你第一个显示的页面里隐藏一下才行

onLaunch() {
	//隐藏官方的tabBar
	uni.hideTabBar()
}
1
2
3
4

用的页面里

tabname指定当前是哪个页面

<tabbar tabname="home"/>
1