qianshancard_web/components/tabbar/tabbar.vue

<template>
    <view>
<!-- 		<view>
			
		</view> -->
        <view class="tabbar-container" :class="isIpx?'IpxBot':''">
			<view class="tabbar-containers">
				<view class="tabbar-item" v-for="(item,index) in tabList" :class="[item.centerItem ? 'center-item' : '']"
				    @click="changeItem(item)" :key="index">
				    <view class="item-top">
				        <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>
    </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/table/tab1.png",
                    selectIcon: "/static/table/tab1_pre.png",
                    text: "首页",
                    centerItem: false
                }, {
                    id: 1,
                    path: "/pages/code/code",
                    icon: "/static/table/tab_code.png",
                    selectIcon: "/static/table/tab_code.png",
                    text: "",
                    centerItem: true
                }, {
                    id: 2,
                    path: "/pages/mine/mine",
                    icon: "/static/table/tab2.png",
                    selectIcon: "/static/table/tab2_pre.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 == 1) {
					uni.navigateTo({
						url:item.path
					})
                    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%;
		background-color: #FFFFFF;
    }
	.tabbar-containers {
	   
		height: 134rpx;
		box-sizing: border-box;
	    /* height: 100rpx; */
	    /* box-shadow: 0 0 5px #999; */
		box-shadow: 0px -6px 11px 0px rgba(215, 215, 215, 0.4);
	    display: flex;
	    align-items: center;
	    /* padding: 24rpx 0; */
	    color: #999999;
	 
	}

    .tabbar-container .tabbar-item {
        width: 33.33%;
        /* height: 100rpx; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .tabbar-container .item-active {
        color: #343434;
    }

    .tabbar-container .center-item {
        display: block;
        position: relative;
    }

    .tabbar-container .tabbar-item .item-top {
        width: 46rpx;
        height: 48rpx;
		margin-bottom: 10rpx;
        /* padding: 5rpx; */
    }

    .tabbar-container .center-item .item-top {
        flex-shrink: 0;
        width: 138rpx;
        height: 136rpx;
       position: absolute;
        bottom:calc(50% - 40rpx);
        left: calc(50% - 69rpx);
        border-radius: 50%;
        /* background-color: #FFFFFF; */
		/* box-shadow: 0px -6px 11px 0px rgba(215, 215, 215, 0.4); */
    }

    .tabbar-container .tabbar-item .item-top image {
        width: 100%;
        height: 100%;
    }

    .tabbar-container .tabbar-item .item-bottom {
        font-size: 26rpx;
        width: 100%;
    }

    .tabbar-container .center-item .item-bottom {
        position: absolute;
        bottom: 2rpx;
    }

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