uniapp自定义Tabbar教程

uniapp自定义Tabbar

1、定义tabbar

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

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

2、创建自定义Tabbar组件

<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 indextype: 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、在以上定义的主页面中加入以下的代码，每个页面都要加

<template>// ........// 这里的selected很重要，标识这里是第一个页面，如果是第二个 这里就是2<MyTabbarVue :selected="1" />
</template><script setup lang="ts">import { onShow } from '@dcloudio/uni-app';import MyTabbarVue from '../../components/MyTabbar.vue';// 这里主要是为了无感隐藏原来的tabbaronShow(() => {uni.hideTabBar({animation: false})})
</script>