uniapp自定义Tabbar教程

昱禹2024-09-26 11:15

uniapp自定义Tabbar

1、定义tabbar

在pages.json中配置除主要页面地址，

json 复制代码

	"tabBar": {
		"custom": true,
		"list": [{
				"pagePath": "pages/home/index"
			},
			{
				"pagePath": "pages/user-center/index"
			}
		]
	},

2、创建自定义Tabbar组件

vue 复制代码

<template>
	<up-tabbar :value="selected" @change="handleChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
		<up-tabbar-item v-for="item in tabbarList" :key="item.text" :text="item.text" :icon="item.icon" />
	</up-tabbar>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	const props = defineProps({
		selected: {
			// 当前选中的tab index
			type: Number,
			default: 1,
		},
	});

	const tabbarList = reactive([
		{
			text: "首页",
			icon: "home",
			pagePath: "/pages/home/index"
		},
		{
			text: "我的",
			icon: "account",
			pagePath: "/pages/user-center/index"

		}
	])

	function handleChange(index) {
		console.log('tab ' + index)
		const tarbar = tabbarList[index]
		// 跳转到其他页面
		uni.switchTab({
			url: tarbar.pagePath
		})
	}
</script>

<style scoped lang="scss">
</style>

3、在以上定义的主页面中加入以下的代码，每个页面都要加

vue 复制代码

<template>
	// ........
	
	// 这里的selected很重要，标识这里是第一个页面，如果是第二个 这里就是2
	<MyTabbarVue :selected="1" />
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app';
	import MyTabbarVue from '../../components/MyTabbar.vue';

	// 这里主要是为了无感隐藏原来的tabbar
	onShow(() => {
		uni.hideTabBar({
			animation: false
		})
	})
</script>