要實(shí)現(xiàn)自定義的tabbar效果，可以使用自定義tab覆蓋主tab來實(shí)現(xiàn)，當(dāng)程序啟動或者從后臺顯示在前臺時隱藏自帶的tab來實(shí)現(xiàn)。自定義一個tab組件，然后在里面實(shí)現(xiàn)自定義的邏輯。
組件中所使用的組件api可以看：Tabbar 底部導(dǎo)航欄 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態(tài)框架 - uni-app UI 框架
先在components/tabbar/里面實(shí)現(xiàn)組件邏輯：
<template>
<u-tabbar :value="tabIndex" @change="change" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
<u-tabbar-item text="首頁" icon="home"></u-tabbar-item>
<view class="tabars" @click="tabMiddle">
<view class="item">
<image class="img" src="../../static/images/gongshang.png" mode="widthFix"></image>
</view>
</view>
<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tabIndex = ref(0);
const change = function (index) {
tabIndex.value = index
console.log("調(diào)用父組件的tab切換", index);
if (index == 0) {
uni.switchTab({
url: '/pages/home/index'
})
} else if (index == 1) {
uni.switchTab({
url: '/pages/my/index'
})
}
};
// 點(diǎn)擊中間凸出來的tab
const tabMiddle = function () {
console.log("點(diǎn)擊中間的tab");
}
</script>
<style lang="scss">
.tabars {
width: 90rpx;
height: 70rpx;
display: flex;
flex-direction: column;
align-content: center;
position: relative;
bottom: 50rpx;
border-radius: 50%;
background-color: #fff;
border-top: 2px solid #dadbde;
padding: 30rpx;
.item {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
.img {
width: 80%;
}
}
}
</style>組件里面實(shí)現(xiàn)tab切換的api里面使用規(guī)范：uni.navigateTo(OBJECT) | uni-app官網(wǎng)
注意看使用switchTab的時候，url的前面要有/，然而pages.json里面的是不需要的。
然后還需要在相應(yīng)的主頁面中引入這個組件：
并且修改一下App.vue文件內(nèi)容，在啟動和顯示的時候，隱藏自帶的tabbar：
<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
console.log("App Launch");
uni.hideTabBar()
});
onShow(() => {
console.log("App Show");
uni.hideTabBar()
});
onHide(() => {
console.log("App Hide");
});
</script>
<style lang="scss">
@import "uview-plus/index.scss";
</style>
然后重新打開即可看到效果：文章來源：http://www.zghlxwxcb.cn/news/detail-759443.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-759443.html
到了這里，關(guān)于uniapp使用vue3和ts開發(fā)小程序自定義tab欄，實(shí)現(xiàn)自定義凸出tabbar效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
