uniapp自定义动态tabbar及全局挂载底部自定义组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp自定义动态tabbar及全局挂载底部自定义组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本篇文章解决的问题如下：

1：uniapp在pages.json中定义的tabbar，在非tabbar页面的时候不会显示，所以自定义了一个tabbar组件。（注意是自定义组件不是官方的custom-tab-bar组件）

2：有些tabbar需要动态变化，会员登陆前和会员登陆后可能会需要在tabbar上面展示不同的项目，所以要做到动态判断

3：uniapp所有页面底部都插入同一个组件（例如版权信息，或右侧悬浮的内容），每个页面都引入一次太过麻烦，所以在main.js里面挂载一次就可以所有页面使用。

一：自定义tabbar组件：（就不需要在pages.json里面再定义tabbar了）文章来源地址https://www.toymoban.com/news/detail-432251.html

<!--
    @时间：2020-03-16
    @描述：自定义底部导航栏
    @使用：
        在main.js全部引入：
            import tabBar from "@/pages/common/tabBar.vue"
            Vue.component('tabBar', tabBar)
        
        在需要显示的页面底部添加：
        <view>
            <view>这里是页面内容代码区域</view>　　　　　　　// 其中uni-p-b-98是公共样式类名，表示padding-bottom: 98upx;  设置的98upx是和底部导航栏的高度保持一致，页面的内容就不会被底部导航遮挡住啦
            <view class="uni-p-b-98"></view>　　　　　　　// 最后引入自定义组件，并传当前栏目对应的pagePath到自定义组件，显示当前栏目的选中样式
            <tabBar :pagePath="'/pages/tabBar/home/home'"></tabBar>
        </view>
 -->
<template>
    <view class="uni-tabbar">
        <view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(ite

到了这里，关于uniapp自定义动态tabbar及全局挂载底部自定义组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！