1.需求：

? 在H5 中需要封裝一個自定義的tabbar 菜單跳轉(zhuǎn) 通過nut-ui 進行二次封裝

2. 注意點

? H5 中原生的tabbar 在ios 中會出現(xiàn)問題 所以進行 封裝tabbar

3. 代碼操作

首先全部的代碼?

<template>
    <nut-tabbar v-model="selected" class="tabbar-container" size="18px" @tab-switch="handleClick">
        <nut-tabbar-item :tab-title="item.title" :value="item.value" v-for="(item, index) in tabList" :key="index">
            <template #icon="props" style="position: relative">
                <img v-if="props.active" :src="item.activeImg" />
                <img v-else :src="item.img" />
            </template>
        </nut-tabbar-item>
    </nut-tabbar>
</template>
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { reactive, onMounted, watch } from "vue";
import { useTabbarStore, useUserStore } from "../../store";
import Taro, { eventCenter } from "@tarojs/taro";
const tabbarStore = useTabbarStore();
const userStore = useUserStore();
const { selected, bottomDistance } = storeToRefs(tabbarStore);
const router = Taro.useRouter();

type menu = {
    name: string;
    title: string;
    pagePath: string;
    img: any;
    activeImg: any;
    value: number;
};
watch(selected, (newValue) => {
    // Taro.setStorageSync("selectedTab", newValue);
    tabbarStore.setSelected(newValue)
});
onMounted(() => {
    tabbarStore.setSelected(Taro.getStorageSync("selectedTab") || 0)
    eventCenter.once(router.onReady, () => {
        getTabbarHeight();
    });
});
const getTabbarHeight = () => {
    const query = Taro.createSelectorQuery()
        .select(".tabbar-container")
        .boundingClientRect();
    query.selectViewport();
    query.exec(function (res) {
        if (res[0]) {
            console.log(res);

            const height = res[0].height;
            tabbarStore.setTabbarHeight(height);
        }
    });
};
const tabList = reactive<menu[]>([
    {
        name: "home",
        title: "購票",
        pagePath: "/pages/index/index",
        img: require("../../assets/tabbar/2/3.png"),
        activeImg: require("../../assets/tabbar/1/3.png"),
        value: 0,
    },
    // {
    //     name: "action",
    //     title: "訂單",
    //     pagePath: "/pages/order/index",
    //     img: require("../../assets/tabbar/2/5.png"),
    //     activeImg: require("../../assets/tabbar/1/5.png"),
    //     value: 0,
    // },
    {
        name: "report",
        title: "我的",
        pagePath: "/pages/my/index",
        img: require("../../assets/tabbar/2/4.png"),
        activeImg: require("../../assets/tabbar/1/4.png"),
        value: 0,
    },

]);
const handleClick = (item, index: number) => {
    let url = tabList[index].pagePath;

    const pages = Taro.getCurrentPages()
    const currentPage = pages[pages.length - 1]
    if (currentPage.route !== url) {
        handleToPath(url);

    }


};
const handleToPath = (url) => {
    Taro.switchTab({
        url: url,
    });
};
</script>
<style lang="scss">
@import "./customTabBar.scss";
</style>

4.解析

tabList: 菜單的內(nèi)容數(shù)組? 根據(jù)自己菜單的數(shù)量 來決定

const tabList = reactive<menu[]>([

? ? {

? ? ? ? name: "home",

? ? ? ? title: "購票",

? ? ? ? pagePath: "/pages/index/index",

? ? ? ? img: require("../../assets/tabbar/2/3.png"),

? ? ? ? activeImg: require("../../assets/tabbar/1/3.png"),

? ? ? ? value: 0,

? ? },

? ? // {

? ? // ? ? name: "action",

? ? // ? ? title: "訂單",

? ? // ? ? pagePath: "/pages/order/index",

? ? // ? ? img: require("../../assets/tabbar/2/5.png"),

? ? // ? ? activeImg: require("../../assets/tabbar/1/5.png"),

? ? // ? ? value: 0,

? ? // },

? ? {

? ? ? ? name: "report",

? ? ? ? title: "我的",

? ? ? ? pagePath: "/pages/my/index",

? ? ? ? img: require("../../assets/tabbar/2/4.png"),

? ? ? ? activeImg: require("../../assets/tabbar/1/4.png"),

? ? ? ? value: 0,

? ? },

]);、

跳轉(zhuǎn)邏輯文章來源地址http://www.zghlxwxcb.cn/news/detail-854208.html

const handleClick = (item, index: number) => {

? ? let url = tabList[index].pagePath;



? ? const pages = Taro.getCurrentPages()

? ? const currentPage = pages[pages.length - 1]

? ? if (currentPage.route !== url) {

? ? ? ? handleToPath(url);



? ? }




};

const handleToPath = (url) => {

? ? Taro.switchTab({

? ? ? ? url: url,

? ? });

};

// const pages = Taro.getCurrentPages()

? ? const currentPage = pages[pages.length - 1]

? ? if (currentPage.route !== url) {

? ? ? ? handleToPath(url);



? ? } 當(dāng)前頁面如果是當(dāng)前的菜單 那么判斷一下 根據(jù)頁面的Api 查找當(dāng)前的頁面路徑 當(dāng)頁面不存在 才跳轉(zhuǎn) 這是優(yōu)化問題

到了這里，關(guān)于Taro + vue3 + js + nutUI 框架中自定義tabbar的組件封裝以及頁面跳轉(zhuǎn)的邏輯的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！