Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0 app-vue app-nvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

使用教程

第一步

引入组件

<template>
    <TC-tabBar :zhi="zhi"></TC-tabBar>
</template>

第二步

将给zhi赋值进行传送给组件

备注：zhi按照底部按钮对应的页面中填写该按钮的索引（从0开始）

<script>

    export default {

        data() {
            return {
            zhi:1    //填写对应按钮的索引
            }
        },
        () {

        },
        methods: {

        }
    }
</script>

第三步

在uni_modules/TC-tabBar/components/TC-tabBar/TC-tabBar中自行修改自己对应的页面路径

部分代码