Uniapp - 自定义 Tabbar 实现

场景复现

需要根据不同的业务场景显示不同的 Tabbar ,官方 Tabbar 配置无法支持,只能通过自定义 Tabbar 实现

解决方案

方案一

  1. 正常配置 Tabbar 页面,但需要将 Tabbar 隐藏
json 复制代码
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home"
      },
      {
        "pagePath": "pages/test"
      }
    ]
  }

依然在 pages.json 中正常配置 Tabbar 页面,避免跳转 Tabbar 路径时出现默认的页面切换动画效果

微信小程序可使用 custom: true 隐藏( Uniapp 官方文档 目前并没有写明这个参数,但 微信小程序 原生支持)

微信小程序自定义 Tabbar developers.weixin.qq.com/miniprogram...

其他端可采用 uni.hideTabBar() 实现

  1. 自定义布局实现 Tabbar 相关逻辑即可

方案二

完全采用自定义动态组件方式实现

Issues

github.com/dcloudio/un...

相关推荐
IT_陈寒几秒前
SpringBoot3踩坑实录:一个@Async注解让我多扛了5000QPS
前端·人工智能·后端
茶憶1 分钟前
uniapp 请求接口封装和使用
vue.js·uni-app
kura_tsuki4 分钟前
[Web网页] 零基础入门 HTML
前端·html
岁月宁静37 分钟前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
golang学习记37 分钟前
从0死磕全栈之Next.js Server Actions 入门实战:在服务端安全执行逻辑,告别 API 路由!
前端
光影少年1 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
这儿有一堆花1 小时前
三种 弹出广告 代码开发实战
前端·html
练习时长一年1 小时前
Bean后处理器
java·服务器·前端
excel1 小时前
Vue 中 v-if 与 v-for 的优先级及最佳实践(Vue2 / Vue3 对比)
前端
吃饭最爱1 小时前
tomcat的功能和作用
前端