uniapp自定义微信小程序底部导航栏_uniapp底部导航栏

        有的时候微信小程序自带的底部导航栏可能满足不了我们的需求，这时就需要我们自己手写完整的底部导航栏。

        首写要在pages.json中的tabBar添加属性custom，取消底部默认导航栏。然后在components中声明tabbar组件。

        tabbar组件代码如下,直接全部粘贴复制即可

<template>
    <view class="tab-block">

         <!-- #ifdef APP-PLUS -->
        <ul
             class='tab-listtab'
         >
            <li
                v-for="(item, index) in tabList"
                :class="'list-item flex flex-column flex-middle ' + item.middleClass"
                @click="handlePush(item, index)"
                :key="index"
            >
                <view class="item-img-box">
                    <image
                        class="item-img"
                        :src=" tabIndex == index ? item.selectedIconPath : item.iconPath"
                    />
                </view>
                <view class="item-text font-20 " 
                    :class="tabIndex == index ? 'specialColor': 'special'"
                >
                    {{item.text}}
                </view>
            </li>
        </ul>
         <!-- #endif -->
         <!-- #ifdef MP-WEIXIN-->
         <ul
             class='tab-list'
         >
            <li
                v-for="(item, index) in tabList"
                :class="'list-item flex flex-column flex-middle ' + item.middleClass"
                @click="handlePush(item, index)"
                :key="index"
            >
                <view class="item-img-box">
                    <image
                        class="item-img"
                        :src=" tabIndex == index ? item.selectedIconPath : item.iconPath"
                    />
                </view>
                <view class="item-text font-20 " 
                    :class="tabIndex == index ? 'specialColor': 'special'"
                >
                    {{item.text}}
                </view>
            </li>
        </ul>
        <!-- #endif -->
        <!-- :class="{ specialColor: tabIndex == index}" -->
        <!-- 兼容iPhonex下面的小黑条 -->
        <!-- <view class="tab-bar" v-show="showTabBar === true"></view> -->
    </view>
</template>

<script>
    export default {
        props: {
            tabIndex: { //当前选中的tab项
                type: String,
                default: 0,
            },
        },
        data() {
            return {
            
                /*
                 * iconPath: 默认icon图片路径
                 * selectedIconPath: 选中icon图片路径 
                 * text: tab按钮文字
                 * pagePath:页面路径
                 * middleClass:该按钮所有的特殊样式类名
                 * tabList最小两项，最多五项
                 * tabList长度为奇数时，中间按钮才会突出显示
                 * 
                 */
        tabList: [{
            "pagePath": "/pages/index/index",
            "iconPath": "/static/img/icon/home_i2.png",
            "selectedIconPath": "/static/img/icon/home2.png",
            "text": "首页"
        }, {
            "pagePath": "/pages/project/index",
            "iconPath": "/static/img/icon/device_i2.png",
            "selectedIconPath": "/static/img/icon/device2.png",
            "text": "工程"
        }, {
            "pagePath": "/pages/job/index",
            "iconPath": "/static/img/icon/job_i2.png",
            "selectedIconPath": "/static/img/icon/job2.png",
            "text": "任务"
        }, {
            "pagePath": "/pages/mine/index",
            "iconPath": "/static/img/icon/mine_i.png",
            "selectedIconPath": "/static/img/icon/mine2.png",
            "text": "我的"
        }],
                showTabBar: false,
                showMiddleButton: false,
            };
        },
        computed: {
            getHeight() {
                return Number(this.height);
            },
        },
        mounted() {
            this.getSystemInfo()
            // this.setTabBar()
        },
        methods: {
            //判断中间按钮是否突出显示，奇数or偶数，奇数突出
            // setTabBar(){
            //     let tabLength = this.tabList.length
            //     if (tabLength % 2) {
            //         debugger
            //         this.showMiddleButton = true
            //         // 向上取整
            //         let middleIndex = Math.floor(tabLength / 2)
            //         // 给中间的添加mid-button
            //         this.tabList[middleIndex].middleClass = 'mid-button'
            //     }
            // },
            
            //点击按钮
            handlePush(item, index) {
                if(index==0){
                    uni.switchTab({
                            url: this.tabList[index].pagePath
                    })
                }
                if(index==1){
                    uni.switchTab({
                            url: this.tabList[index].pagePath
                    })    
                }
                if(index==2){
                    uni.switchTab({
                            url: this.tabList[index].pagePath
                    })    
                }
                if(index==3){
                    uni.switchTab({
                            url: this.tabList[index].pagePath
                    })    
                }
                // if (this.tabIndex !== index) {
                //     uni.switchTab({
                //         url: item.pagePath
                //     })    
                // }
            },
            
            //兼容iPhoneX以上底部黑线条的显示
            getSystemInfo() {
                //获取系统信息
                uni.getSystemInfo({
                    success: (res) => {
                        // X及以上的异形屏top为44，非异形屏为20
                        if (res.safeArea.top > 20) {
                            this.showTabBar = true
                        }
                    }
                });
            },
        }
    }
</script>

<style lang="scss">
    .special{
        color: #2d2967;
        // color: #2E2E31;
    }
    .specialColor{
        color: #E2FFA2;
    }
    .flex {
        display: flex;
        flex-flow: row wrap;
    }

    .flex-center {
        // align-items: center;
        // justify-content: center;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-middle {
        align-items: center;
    }
    .font-20 {
        font-size: 25rpx;
    }
    .tab-block {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        // background-size: contain;
        width:100vw;
        // width: 750rpx;
        .tab-listtab{
            padding-right: 50rpx;
            height:180rpx;
            display: flex;
            // flex-flow: row wrap;
            align-items: center;
            // justify-content: center;
            list-style: none;
            // width: 100rpx;
            border-top-right-radius: 60rpx;
            border-top-left-radius: 60rpx;
            background: rgb(77, 145, 255);
            box-shadow: 0px 0px 27px rgba(0, 0, 0, 0.32);
        }
        .tab-list{
            height:180rpx;
            display: flex;
            // flex-flow: row wrap;
            align-items: center;
            // justify-content: center;
            
            list-style: none;
            // width: 100rpx;
            border-top-right-radius: 60rpx;
            border-top-left-radius: 60rpx;
            background: rgb(77, 145, 255);
            box-shadow: 0px 0px 27px rgba(0, 0, 0, 0.32);
        }
        
        // .tab-list-default{

        // }
        // .tab-list-middle {
        //     position: relative;
        //     background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
        //     background-size: cover;
        // }
        .list-item {
            flex: 1;
            .item-img-box {
                width: 44rpx;
                height: 42rpx;
                margin-bottom: 9rpx;
                position: relative;
            }
            .item-img {
                width: 44rpx;
                height: 42rpx;
            }
        }

    }
</style>

然后在首页的四个底部页面声明一下组件，引入即可实现

<view-tabbar tabIndex=0></view-tabbar>

<view-tabbar tabIndex=1></view-tabbar>

<view-tabbar tabIndex=2></view-tabbar>

<view-tabbar tabIndex=3></view-tabbar>