首先  components中 新建一个自定义组件

组件中编写

---

<template>
    <view class="tabBar">
        <view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item"

         :class="{'active':item.url == currentPage}"@click="navTo(item,index)">
            <image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
            <image v-else :src="item.imgNormal" mode=""></image>
            <view class="text">{{item.text}}</view>
        </view>
    </view>
</template>

---

<script>
    export default {
        props: {
            currentPage: {
                type: String,
                default: 'index'
            }
        },
        data() {
            return {
                tabBar: [{
                        url: 'information',
                        text: '消息',
                        imgNormal:'../../static/images/information.png',
                        imgClick:'../../static/images/active/information_active.png'
                    },
                    {
                        url: 'officialPartner',
                        text: '内容',
                        imgNormal:'../../static/images/officialPartner.png',
                        imgClick:'../../static/images/active/offPartner_active.png'
                    },
                    {
                        url: 'stock',
                        text: '库存',
                        imgNormal:'../../static/images/stock.png',
                        imgClick:'../../static/images/active/stock_active.png'
                    }, {
                        url: 'product',
                        text: '产品',
                        imgNormal:'../../static/images/product.png',
                        imgClick:'../../static/images/active/product_active.png'
                    }, {
                        url: 'mine',
                        text: '我的',
                        imgNormal:'../../static/images/mine.png',
                        imgClick:'../../static/images/active/mine_active.png'
                    }
                ],
                level:''
                 
            };
        },mounted(){
            let userlevel = uni.getStorageSync('level');
            /* console.log(userlevel); */
            let _this = this;
            if (userlevel== 1) {
                _this.tabBar.splice(3, 1);
            } else {
                _this.tabBar.splice(1,1);
                _this.tabBar.splice(1,1);
            }
        },
        created() {
            uni.hideTabBar({})
        },
        computed: {
 
        },
        methods: {
            navTo(item,index) {
                let _this = this;
                if (item.url !== _this.currentPage) {
                    var isUrl = `/pages/${item.url}/${item.url}`
                    const that = this
                    uni.switchTab({
                        url: isUrl
                    })
                } else {
                    /* this.$parent.toTop() */
                }
            }
        }
    }
</script>

---

<style lang="scss" scoped>
    //导航栏设置
    $isRadius:20upx; //左上右上圆角
    $isWidth:100vw; //导航栏宽度
    $isBorder:1px solid #eeeeee; //边框 不需要则设为0px
    $isBg:white; //背景
     
    // 选中设置
    $chooseTextColor:#1b60ac; //选中时字体颜色
    $chooseBgColor:white; //选中时背景颜色 transparent为透明
 
    //未选中设置
    $normalTextColor:#999; //未选中颜色
 
    .tabBar {
        width: $isWidth;
        height: 100upx;
        position: fixed;
        bottom: 10upx;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 998;
        background-color: $isBg;
        color: $normalTextColor;
        border-left: $isBorder;
        border-top: $isBorder;
        border-right: $isBorder;
        display: flex;
        justify-content: space-around;
        border-top-right-radius: $isRadius;
        border-top-left-radius: $isRadius;
        box-sizing: border-box;
        overflow: hidden;
 
        .tabbar_item {
            width: 25%;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
 
            &.active {
                /* border-left: $isBorder;
                border-top: $isBorder; */
                background: $chooseBgColor;
                color: $chooseTextColor;
            }
        }
 
        image {
            width: 36upx;
            height: 36upx;
            margin-left: 5upx;
        }
    }
</style>

---

页面引入

<template>
    <view class="shop-index" >
        <view class="container">
            <tabBar :currentPage="currentPage"></tabBar>
        </view>
    </view>
</template>

---

引入自定义组件

<script>
    import tabBar from '../../components/page-tabBar.vue'

</script>