在uniapp/vue3项目中自定义底部导航栏

1.component/tarbar.vue

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
<template>
	<view>
		<u-tabbar :active="useStore.activeTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item v-for="(item, index) in tabbarItems" :key="index" :icon="getTabbarIcon(item, index)"
				:text="item.text" @click="handleTabbarItemClick(item, index)">
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script setup>
	//引入pinia仓库
	import useTarBarStore from '@/store/tarbar.js'
	let useStore = useTarBarStore()

	const tabbarItems = [{
			pagePath: '/pages/index/index',
			text: '首页',
			iconPath: '/static/tabBar/home.png',
			selectedIconPath: '/static/tabBar/home.png'
		},
		{
			pagePath: '/pages/categories/categories',
			text: '分类',
			iconPath: '/static/tabBar/category.png',
			selectedIconPath: '/static/tabBar/category.png'
		},
		{
			pagePath: '/pages/found/found',
			text: '发现',
			iconPath: '/static/tabBar/found.png',
			selectedIconPath: '/static/tabBar/found.png'
		}
	]
	//点击tabbar按钮
	const handleTabbarItemClick = (item, index) => {
		//如果点击了别的tarbar按钮
		if (useStore.activeTab !== index) {
			//设置新按钮
			useStore.setActive(index)
			const path = item.pagePath
			//uniapp的官方api，切换页面，这个path必须是tarbar的path
			uni.switchTab({
				url: path
			})

		}
	}
	//图标的切换，就是点击之后图标会切换，如果有需求可以看看
	const getTabbarIcon = (item, index) => {
		return useStore.activeTab === index ? item.selectedIconPath : item.iconPath
	}
</script>

配置点击之后的事件，按钮的切换，路由的切换。可以看到按钮的索引是保存在pinia的，因为是全局的。

2.创建pinia仓库

store/tarbar.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {
	defineStore
} from 'pinia'

//创建useTarbarStore
const useTarbarStore = defineStore('Tarbar', {
	state: () => {
		return {
			activeTab: 1 // 默认选中的索引
		}
	},
	actions: {
		//设置active的值
		setActive(active) {
			this.activeTab = active
		}
	}
})
//暴露
export default useTarbarStore

这个active是tarbar来标识索引的，不同tarbar有唯一的active。

3.配置tarbar路径

之前在tarbar.vue配置的是要跳转的路径，这里配置真正的路径。在page.json新增一个tarbar：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	// 省略其他元素...
	"tabBar": { // 设置底部 tab 的表现
		"color": "#333333",
		"selectedColor": "#fa2c19",
		"borderStyle": "black",
		"backgroundColor": "#fff",
		"list": [{
			"pagePath": "pages/index/index"
		}, {
			"pagePath": "pages/categories/categories"
		}, {
			"pagePath": "pages/found/found"
		}]
	}
}

只需要路径即可，其他自行DIY。

4.引入tarbar

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

1
2
3
4
5
6
<template>
  <view>
    <!-- 引入导航栏tabbar组件 -->
    <tabbar></tabbar>
  </view>
</template>

隐藏pages.json里配置的导航栏，使用封装的tabbar组件，在App.vue根组件中编辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
			//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			uni.hideTabBar({
				animation: false
			})
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>