UniApp配置tabBar

技术 JS/TS
1

theme: cyanosis

UniApp Tabbar

在Uniapp中，配置tabbar有两种方式：

第一种，通过UniApp自定义tabbar选项，配置对应的tab选项即可，

第二种，通过自定义tabbar实现

uniapp.jpeg
uniapp.jpeg800×320 6.66 KB

一 配置UniApp原生tabBar选项

1.1，配置pages页面

第一步,配置Pages.json里面的pages页面路由选项（必须先注册tabbar 对应的页面，不然会有不显示的问题）

"pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/userCenter/index",
      "style": {
        "navigationBarTitleText": "个人中心"
      }
    }
  ],

image.png
image.png2560×1648 551 KB

1.2，配置pages.json里面的tabBar选项

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/home_icon.png",
        "selectedIconPath": "static/home_actived_icon.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/userCenter/index",
        "iconPath": "static/usercenter_icon.png",
        "selectedIconPath": "static/usercenter_actived_icon.png",
        "text": "个人中心"
      }
    ]
  }

此刻，不出意外的话原生的tabBar就可以正常显示了，当然tabBar有很多的选项可以配置，颜色，图标啥的，请看官网的配置项目

二 配置自定义tabBar

这里通过uview-plus 组件库里面的 [up-tabbar](https://uiadmin.net/uview-plus/components/tabbar.html) 组件来实现, uview-plus也是可以实现多端的组件库，而且组件比较多，当然使用前要看一下每个组件的多端适配情况来决定的

2.1 自定义tabBar组件

2.2 将自定义的组件在main.ts里面注册为全局组件，因为有很多的页面都需要显示（看需求，不需要则跳过）

image.png
image.png2564×1278 282 KB

直接在要使用的页面里面引入即可

讨论：

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom 将其精简为一步。只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.(vue|uvue)目录结构（注意：当同时存在vue和uvue时，uni-app 项目优先使用 vue 文件，而uni-app x 项目优先使用 uvue 文件，详情）。就可以不用引用、注册，直接在页面中使用, 可以通过easycom的custom配置tabbar。

但是配置了还是有点问题，如果大家有其他解决方案，可以评论区讨论一下

以上都是一些实现方案，如有错误，还请大家指正🙏

这是一个从 https://juejin.cn/post/7369029201578508303 下的原始话题分离的讨论话题