前端Vue自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP

前端Vue自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP，

阅读全文下载完整代码请关注微信公众号： 前端组件开发

效果图如下：

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>