前端Vue自定义tabbar底部tabbar凸起tabbar兼容
2023-06-24 本文已影响0人
前端组件分享
前端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代码实现部分
```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>
```
