uniapp自定义tabbar的动态添加

这个是tab自定义的

 

<template>
    <view class="uni-tabbar">
        <view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
            <view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view>
            <!-- 上面使用的是字体图标，解决切换页面的时候图标会闪的效果，毕竟每切换一个页面都会闪一下不太好看，可以切换使用下面的图片方式 -->
            <view v-if="false" class="uni-tabbar__bd">
                <view class="uni-tabbar__icon">
                    <image v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.selectedIconPath"></image>
                    <image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath"></image>
                </view>
            </view>
            <view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
                {{item.text}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            pagePath: null,
            addNum:{
                type:Number
            }
            
        },
        data() {
            return {
                page: 'contact',
                showPage: false,
                containerHeight: 400,
              tabbar: [{
                      "pagePath": "/pages/tabbar/tabbar-1/tabbar-1",
                      "iconPath": "./static/tabbar/icon-sy@2x.png",
                      "selectedIconPath": "../static/tabbar/icon-szsy@2x.png",
                      "text": "首页"
                  },
                  {
                      "pagePath": "/pages/tabbar/tabbar-2/tabbar-2",
                      "iconPath": "../../../static/tabbar/icon-wk@2x.png",
                      "selectedIconPath": "../../../static/tabbar/icon-xzwk@2x.png",
                      "text": "挖矿"
                  },
              
                  {
                      "pagePath": "/pages/tabbar/tabbar-3/tabbar-3",
                      "iconPath": "../../../static/tabbar/ixon-jy@2x.png",
                      "selectedIconPath": "../../../static/tabbar/icon-xzwk@2x.png",
                      "text": "交易"
                  },
                  {
                      "pagePath": "/pages/tabbar/tabbar-4/tabbar-4",
                      "iconPath": "/static/tabbar/icon-td@2x.png",
                      "selectedIconPath": "7static/tabbar/icon-xztd@2x.png",
                      "text": "团队"
                  }
              ],
            };
        },
        mounted() {
            // true为判断条件，根据实际的需求替换即可
            if(this.addNum==0) {
                console.log(this.addNum)
                this.tabbar.splice(2,0,
                   {
                       iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
                       selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
                       text: '发布',
                       "pagePath": "/pages/other/releaseDeal/releaseDeal",
                       midButton: true,
                       customIcon: true,
                   },
                )
            }
        },
        methods: {
            changeTab(item) {
                this.page = item.pagePath;
　　　　　　　　　　// 这里使用reLaunch关闭所有的页面，打开新的栏目页面
                uni.reLaunch({
                    url: this.page
                });
            },
        }
    }
</script>

<style lang="scss" scoped>

    [nvue] uni-scroll-view, [nvue] uni-swiper-item, [nvue] uni-view {
        flex-direction: unset;
    }
    [nvue-dir-column] uni-swiper-item, [nvue-dir-column] uni-view {
        flex-direction: unset;
    }
    .uni-tabbar {
        position: fixed;
        bottom: 0;
        z-index: 999;
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 98upx;
        padding: 16upx 0;
        box-sizing: border-box;
        // border-top: solid 1upx #ccc;
        background-color: #131E32;
        box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
        .uni-tabbar__item {
            display: block;
            line-height: 24upx;
            font-size: 20upx;
            text-align: center;
        }
        .uni-tabbar__icon {
            height: 42upx;
            line-height: 42upx;
            text-align: center;
        }
        .icon {
            display: inline-block;
        }
        .uni-tabbar__label {
            line-height: 24upx;
            font-size: 24upx;
            color: #999;
            &.active {
                color: #1ca6ec;
            }
        }
    }
</style>

 

main 。js

import tabBar from './components/tabbar.vue'
Vue.component('tabBar', tabBar)

 

<tabBar :pagePath="'/pages/tabBar/home/home'"></tabBar>

引用界面