在实际页面开发中，经常有中间突出的tab需求。

以一个单页面为中心的显示：https://www.cnblogs.com/lovejielive/p/14251327.html，在处理数据相对麻烦。

以组件方式来导入，就要在pages.json中配置的tabBar的每一个页面中导入该组件，当然也可以选择全局导入。

组件形式配置，页面的各项生命周期都可以正常使用，重新自定义tabBar样式也方便。

pages.json配置

创建所需的导航页面，在tabBar中配置好.

在使用中只需要配置list与里面的pagePath为页面路径

"tabBar": {
        "color": "#cbcbcb",
        "selectedColor": "#f5cb2b",
        "borderStyle": "black",
        "backgroundColor": "#FFFFFF",
        "list": [{
            "pagePath": "pages/index/index"}, {
            "pagePath": "pages/look/look"}, {
            "pagePath": "pages/enter/enter"}, {
            "pagePath": "pages/my/my"}, {
            "pagePath": "pages/enter/enterInfo"}]
    }

创建tabBar组件

在components文件夹下创建 tabbar文件夹 tabbar.vue

在static下创建 tab用来放置图片

tabBar代码

需要修改 tabList 里的

path：页面路径 与pages.json中对应

icon：默认图标

selectIcon：选中图标

<template>
    <view>
        <view class="tabbar-container":class="isIpx?'IpxBot':''">
            <view class="tabbar-item"v-for="(item,index) in tabList":class="[item.centerItem ? 'center-item' : '']"@click="changeItem(item)":key="index">
                <view class="item-top":style="{padding: item.id == 2?0:'10rpx'}">
                    <image :src="tabId==item.id?item.selectIcon:item.icon"mode=""></image>
                </view>
                <view class="item-bottom":class="[tabId==item.id ? 'item-active' : '']">
                    <text>{{item.text}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>export default{
        props: {
            currentPage: {
                type: Number,
                default: 0}
        },
        data() {
            return{
                //适配IPhoneX
isIpx: false, 
                //底部Tab
tabId: 0,
                tabList: [{
                    id: 0,
                    path: "/pages/index/index",
                    icon: "/static/tab/home.png",
                    selectIcon: "/static/tab/home_select.png",
                    text: "首页",
                    centerItem: false}, {
                    id: 1,
                    path: "/pages/look/look",
                    icon: "/static/tab/look.png",
                    selectIcon: "/static/tab/look_select.png",
                    text: "展示",
                    centerItem: false}, {
                    id: 2,
                    path: "/pages/code/code",
                    icon: "/static/tab/select_add.png",
                    selectIcon: "/static/tab/select_add.png",
                    text: "快速",
                    centerItem: true}, {
                    id: 3,
                    path: "/pages/enter/enter",
                    icon: "/static/tab/enter.png",
                    selectIcon: "/static/tab/enter_select.png",
                    text: "入驻",
                    centerItem: false}, {
                    id: 4,
                    path: "/pages/my/my",
                    icon: "/static/tab/my.png",
                    selectIcon: "/static/tab/my_select.png",
                    text: "我的",
                    centerItem: false}],
            };
        },
        mounted() {
            this.tabId = this.currentPage;
            //隐藏原生tab
uni.hideTabBar();
        },
        created() {
            //判断为 iPhone X 给予底部距离
let that = thisuni.getSystemInfo({
                success: function(res) {
                    if(res.model.indexOf('iPhone X') !== -1) {
                        that.isIpx = true;
                    }
                }
            })
        },
        methods: {
            //tab 切换
changeItem(item) {
                if(item.id == 2) {
                    console.log('点击中间' + '快速');
                } else{
                    uni.switchTab({
                        url: item.path,
                    });
                }
            },

        }
    }
</script>
<style scoped>view {padding:0;margin:0;box-sizing:border-box;
    }.tabbar-container {position:fixed;bottom:0;left:0;width:100%;
        /*height: 100rpx; */box-shadow:0 0 5px #999;display:flex;align-items:center;padding:5rpx 0;color:#999999;background-color:#FFFFFF;
    }.tabbar-container .tabbar-item {width:20%;height:100rpx;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
    }.tabbar-container .item-active {color:#f5cb2b;
    }.tabbar-container .center-item {display:block;position:relative;
    }.tabbar-container .tabbar-item .item-top {width:70rpx;height:70rpx;padding:5rpx;
    }.tabbar-container .center-item .item-top {flex-shrink:0;width:130rpx;height:130rpx;position:absolute;top:-67rpx;left:calc(50% - 70rpx);border-radius:50%;box-shadow:0 0 5px #999;background-color:#FFFFFF;
    }.tabbar-container .tabbar-item .item-top image {width:100%;height:100%;
    }.tabbar-container .tabbar-item .item-bottom {font-size:25rpx;width:100%;
    }.tabbar-container .center-item .item-bottom {position:absolute;bottom:2rpx;
    }

    /*适配iPhone X */.IpxBot {padding-bottom:30rpx !important;
    }
</style>

tabBar代码

页面中使用

<template>
    <view>
    <!--底部 导航栏  currentPage 当前页面ID -->
        <tab-bar :currentPage="0"></tab-bar>
    </view>
</template>

<script>
    //导入组件
import tabBar from '@/components/tabbar/tabbar.vue'export default{
        data() {
            return{
            };
        },
        components:{
            tabBar
        },
        methods: {}
    };
</script>

mian.js中全局导入

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

本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/15475714.html