前端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>

posted @   前端组件开发  阅读(93)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示