uni-app的自定义tabbar在真机上未显示

我按照社区里的一个demo的代码 https://ask.dcloud.net.cn/article/34946
照着写了一个tabbar，在微信调试工具是可以正常显示的

但是在真机运行的时候下面的tabbar就没有了，显示不出来，空白的

<template>  
    <view style="width: 100%;">  
        <swiper :style="'width: 100%'" :current="active" duration="0" @change="swiperChange">  
            <swiper-item>  
                <view class="swiper-item">index</view>  
            </swiper-item>  
            <swiper-item>  
                <view class="swiper-item">personal center</view>  
            </swiper-item>  
        </swiper>  
        <view class="tab">  
            <view :class="active==0?'item active':'item'" @click="active=0">  
                <view>  
                    <view class="uni-icon uni-icon-home"></view>  
                </view>  
                <view>首页</view>  
            </view>  
            <view class="item-add">  
                <view>  
                    <view class="uni-icon uni-icon-plus-filled"></view>  
                </view>  
                <view class="text">发布</view>  
            </view>  
            <view :class="active==1?'item active':'item'" @click="active=1">  
                <view>  
                    <view class="uni-icon uni-icon-list"></view>  
                </view>  
                <view>个人中心</view>  
            </view>  

        </view>  
    </view>  
</template>  
<script>  
export default {  
    data () {  
        return {  
            active: 0,  
            height:0  
        }  
    },  
    methods:{  
        swiperChange(e) {  
            this.active = e.detail.current;  
        }  
    },  
    onLoad:function(){  
        uni.getSystemInfo({  
            success:res=>{  
                this.height = res.screenHeight;  
            }  
        })  
    }  
}  
</script>  
<style>  
@import "../../../common/icon.css";  
    .swiper-item {  
        width: 100%;  
        height: 100%;  
    }  

    .tab {  
        position: fixed;  
        z-index: 999;  
        height: 108upx;  
        width: 100%;  
        bottom: 0;  
        background-color: #F7F7F7;  
        display: flex;  
        border-top: #CCCCCC 2px solid;  
    }  
    .uni-icon {  
        font-size: 48upx;  
    }  

    .tab .item-add {  
        width: 34%;  
        color: #929292;  
        display: flex;  
        align-items: center;  
        flex-direction: column;  
        justify-content: center;  
        position: relative;  
        text-align: center;  
    }  

    .item-add .uni-icon {  
        position: absolute;  
        color: #929292;  
        border-radius: 50%;  
        font-size: 116upx;  
        left: 50%;  
        margin-left: -58upx;  
        top: -50%;  
    }  

    .item-add .text {  
        font-size: 24upx;  
        padding-top: 50upx;  
    }  

    .tab .item {  
        width: 33%;  
        color: #929292;  
        font-size: 24upx;  
        display: flex;  
        align-items: center;  
        flex-direction: column;  
        justify-content: center;  
    }  

    .active {  
        color: #20D785 !important;  
    }  

    .active .uni-icon {  
        color: #20D785;  
    }  
</style>