uni-app 底部導航欄-中間突出

 

 

在實際頁面開發中，經常有中間突出的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 = this
            uni.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>

頁面中使用

<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)