uniapp - 微信小程序 - 自定义底部tabbar_uniapp实现微信小程序底部栏样式

废话不多说，直接行源码

这里需要的底部tabbar的图片在这里 我的资源里面呢

图片是这样的

先看成品吧

首先 - BaseApp\components\Tabbar.vue

<script setup>
	import {
		ref,
		nextTick,
		watch
	} from "vue"

	// 核心 - 隐藏uniapp自带的底部tabbar
	uni.hideTabBar()

	let current = ref(0)

	const list = ref(
		[{
			pagePath: "pages/index/index",
			iconPath: '../static/tab/11.png',
			selectedIconPath: "../static/tab/1.png",
			text: "index"
		}, {
			pagePath: "pages/warn/index",
			iconPath: '../static/tab/22.png',
			selectedIconPath: "../static/tab/2.png",
			text: "warn"
		}, {
			pagePath: "pages/my/index",
			iconPath: '../static/tab/33.png',
			selectedIconPath: "../static/tab/3.png",
			text: "my"
		}, {
			pagePath: "pages/user/index",
			iconPath: '../static/tab/44.png',
			selectedIconPath: "../static/tab/4.png",
			text: "user"
		}, {
			pagePath: "pages/sign/index",
			iconPath: '../static/tab/55.png',
			selectedIconPath: "../static/tab/5.png",
			text: "sign"
		}]
	)

	const changeTab = (e) => {
		uni.switchTab({
			url: `/${list.value[e].pagePath}`,
		})
	}

	// const props = defineProps(['current'])
	const props = defineProps({
		current: {
			type: String, // 或者其他你需要的类型  
			required: true // 如果这个 prop 是必需的  
		}
	})
	console.log('props=', props)
	current.value = props.current
</script>

<template>
	<view class="tabbar">

		<!-- 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 -->
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="changeTab(index)">
			<view class="select" v-if="current == index">
				<view class="i-t">
					<image class="img imgactive" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image>
					<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
					<view class="text active" v-if="current == index">{{item.text}}</view>
					<view class="text" v-else>{{item.text}}</view>
				</view>
			</view>
			<view v-else>
				<image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image>
				<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
				<view class="text active" v-if="current == index">{{item.text}}</view>
				<view class="text" v-else>{{item.text}}</view>
			</view>
		</view>

	</view>
</template>

<style>
	.tabbar {
		/* 1.5vh: 视口高度的1.5% */
		font-size: 1.5vh;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		/* 6vh: 视口高度的6% */
		height: 6vh;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.tabbar-item {
		height: 100%;
		padding: 0 20rpx;
		/* 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select, {
		width: 10vh;
		height: 10vh;
		/* border-radius: 10vh; */
		/* margin-bottom: 4vh; */
		/* background-color: #086d5b; */
		position: relative;
	},

	.i-t {
		font-size: 1.5vh;
		padding: 2vw 2vh;
		position: absolute;
		bottom: 1vh;
	}

	.img ,{
		height: 3vh;
		width: 2.5vh;
		/* 4vw: 视口宽度的4% */
		margin: 0 4vw;
	},

	.imgactive, {
		height: 3.5vh;
		width: 3.2vh;
		margin: 0 2.2vw;
	}

	.text {,
		text-align: center;
		color: #CACACA;
	},

	.text, .active {
		color: #fff;
	}
</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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

其次 - pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "index"
			}
		}, {
			"path": "pages/warn/index",
			"style": {
				"navigationBarTitleText": "告警",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/my/index",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/user/index",
			"style": {
				"navigationBarTitleText": "其他",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/sign/index",
			"style": {
				"navigationBarTitleText": "标签",
				"enablePullDownRefresh": false
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	
	// 主要是这里的：tabbar -------------------------------------------------------
	"tabBar": {
		"height": "0",
		// "color": "#7A7E83",
		// "selectedColor": "#55ffff",
		// "backgroundColor": "#55ff7f",
		"list": [
			{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/warn/index"
			},
			{
				"pagePath": "pages/my/index"
			},
			{
				"pagePath": "pages/user/index"
			},
			{
				"pagePath": "pages/sign/index"
			}
		]
	},
	"uniIdRouter": {}

}

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

再然后 - 在别的.vue组件中这样使用

BaseApp\pages\my.vue

<template>
	<text class="title">{{title}}</text>
	
	<tabbar :current='2'></tabbar>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	import tabbar from '../../components/Tabbar.vue'

	let title = ref('我的')
</script>

<style></style>

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