uniapp小程序自定义tabBar，根据身份切换自定义tabBar

-Wack-

于 2022-10-08 10:34:35 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序 uni-app vue.js 前端

本文链接：https://blog.csdn.net/weixin_59803648/article/details/127203398

本文介绍如何在小程序中实现自定义TabBar，包括配置pages.json隐藏原生TabBar、使用生命周期方法确保隐藏效果、创建自定义TabBar组件及根据不同身份展示不同TabBar的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 对于导航页自定义tabBar，仍需要在pages.json中配置tabBar

"tabBar": {
    // 此设置方法小程序真机无效,应在app中隐藏原生tab
    // "custom": true,
    // "selectedColor": "#2196F3",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "static/tab/home.png",
      "selectedIconPath": "static/tab/home-active.png"
    }, {
      "pagePath": "pages/notice/notice",
      "text": "公告",
      "iconPath": "static/tab/notice.png",
      "selectedIconPath": "static/tab/notice-active.png"
    }, {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "static/tab/my.png",
      "selectedIconPath": "static/tab/my-active.png"
    }]
  },

2. 在App.vue中的onShow生命周期中隐藏原生tabBar

onShow: function() {
      // 隐藏原生tabbar
      uni.hideTabBar({
        animation: false
      })

最低0.47元/天解锁文章

200万优质内容无限畅学