前端Vue自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13167

效果图如下：

cc-myTabbar

使用方法


<!-- tabBarShow：显示第几个tabbar -->

<cc-myTabbar :tabBarShow="0"></cc-myTabbar>

<!-- 隐藏原生tabbar -->

onReady() {

uni.hideTabBar()

}

<!-- 页面距离底部140rpx(自定义tabbar的高度) -->

page {

padding-bottom: 140rpx;

}

HTML代码实现部分


<template>

<view class="page">

<!-- tabBarShow：显示第几个tabbar -->

<cc-myTabbar :tabBarShow="0"></cc-myTabbar>

</view>

</template>

<script>

export default {

data() {

return {

};

},

onReady() {

uni.hideTabBar()

},

methods: {

}

}

</script>

<style scoped lang="scss">

page {

padding-bottom: 140rpx;

}

</style>