uni-app 实现凸起的 tabbar 底部导航栏

效果图

uni-app 实现凸起的 tabbar 底部导航栏_第1张图片

在 pages.json 中设置隐藏自带的 tabbar 导航栏

"custom": true, // 开启自定义tabBar(不填每次原来的tabbar在重新加载时都回闪现)

uni-app 实现凸起的 tabbar 底部导航栏_第2张图片

新建一个 custom-tabbar.vue 自定义组件页面

custom-tabbar.vue






底部安全区域的适配问题可查看:uni-app 苹果手机底部安全区域的适配问题

在 main.js 中引用组件

// 注册全局组件
import customTabbar from "components/custom-tabbar.vue"
Vue.component('custom-tabbar', customTabbar)

在要用到的页面中直接调用


你可能感兴趣的:(uni-app,uni-app,前端)