UniApp Tabbar

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

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

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

一配置UniApp原生tabBar选项

1.1，配置pages页面

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

json 复制代码

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

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

json 复制代码

"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组件

js 复制代码

<template>
  <view class="">
    <up-tabbar :value="value2" :placeholder="false" @change="(name: number) => (value2 = name)" :fixed="true" :safeAreaInsetBottom="false">
      <up-tabbar-item text="首页" icon="home" dot></up-tabbar-item>
      <up-tabbar-item text="放映厅" icon="photo" badge="3"></up-tabbar-item>
      <up-tabbar-item text="直播" icon="play-right"></up-tabbar-item>
      <up-tabbar-item text="我的" icon="account"></up-tabbar-item>
    </up-tabbar>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const value2 = ref(1);
</script>

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

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

讨论：

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

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

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

UniApp配置tabBar