前端Vue自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13167
效果图如下:
![](https://img.haomeiwen.com/i10860471/7e4158778584b0b4.png)
![](https://img.haomeiwen.com/i10860471/7db876ac1081d5ff.png)
# cc-myTabbar
#### 使用方法
```使用方法
<!-- tabBarShow:显示第几个tabbar -->
<cc-myTabbar :tabBarShow="0"></cc-myTabbar>
<!-- 隐藏原生tabbar -->
onReady() {
uni.hideTabBar()
}
<!-- 页面距离底部140rpx(自定义tabbar的高度) -->
page {
padding-bottom: 140rpx;
}
```
#### HTML代码实现部分
```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>
```
网友评论