跌跌撞撞从新手写UniAPP(三):tabBar配置

大家好，我是前端SkyRain，一个大重量级别的前端工程师(240+)。

经过前面的操作，已经基本可以开始进行开发了。uniApp作为一个配置项众多的框架，在项目正式开发之前，将基础配置搞定还是很有帮助的。

底部导航栏配置

tabBar的配置也和UI框架的问题有些相似，在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。

但是也有一个让人很不爽的点：导航图标icon必须是图片，不支持图标形式。所以才有了自定义导航栏的存在，自己定义的东西，用什么都可以！

tabBar配置

新建页面

在配置导航栏之前，要先把对应的页面创建起来。选中pages文件夹，右键→新建页面。

如果想比较简单省事一些的，就选择创建同名目录。创建的文件就会在同名目录下。也可以选择先创建目录，再创建文件。个人习惯不通，我选的是第二种。

右键→新建→目录，填入文件夹名称，回车即可。

想要在导航栏中显示几个tab，就创建几个页面。

下图所示就是我创创建的页面：首页、分类、活动、我的。

配置内容

tabBar的配置内容在page.json文件里。

{
  "tabBar": {
    "color":"#999999",
    "selectedColor":"#ff0000",
    "backgroundColor":"#eeeeee",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath":"static/img/home.png",
        "selectedIconPath":"static/img/home_select.png",
        "text":"首页"
      },
      {
        "pagePath": "pages/category/index",
        "iconPath":"static/img/category.png",
        "selectedIconPath":"static/img/category_select.png",
        "text":"分类"
      },
      {
        "pagePath": "pages/activity/index",
        "iconPath":"static/img/activity.png",
        "selectedIconPath":"static/img/activity_select.png",
        "text":"活动"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath":"static/img/mine.png",
        "selectedIconPath":"static/img/mine_select.png",
        "text":"我的"
      }
    ]
  },
  "pages":{...}
}

效果如图所示：

自定义TabBar

自力更生，艰苦创业。艰难困苦，玉汝于成。

自定义的情况下，可操作范围就扩大了。此处选择uView框架的u-tabbar作为示例。

组件数据

在页面中引入u-tababr组件并传入属性数据等。

<u-tabbar v-model="current" :list="list" :mid-button="true" active-color='#003690' height="110rpx"
      :before-switch="beforeSwitch"></u-tabbar>

组件的数据和切换函数处理

export default {
  data(){
    return {
      list: [
          {
            iconPath: "/static/img/home.png",
            selectedIconPath: "/static/img/home_select.png",
            // iconPath: "home",
            // selectedIconPath: "home-fill",
            text: '首页',
            isDot: false,
            customIcon: false
          },
          {
            iconPath: "/static/img/category.png",
            selectedIconPath: "/static/img/category_select.png",
            // iconPath: "grid",
            // selectedIconPath: "grid-fill",
            text: '分类',
            midButton: true,
            customIcon: false
          },
          {
            iconPath: "/static/img/activity.png",
            selectedIconPath: "/static/img/activity_select.png",
            // iconPath: "shopping-cart",
            // selectedIconPath: "shopping-cart-fill",
            text: '活动',
            midButton: true,
            customIcon: false
          },
          {
            iconPath: "/static/img/mine.png",
            selectedIconPath: "/static/img/mine_select.png",
            // iconPath: "account",
            // selectedIconPath: "account-fill",
            text: '我的',
            isDot: false,
            customIcon: false
          }
       ],
    }
  },
  methods: {
    beforeSwitch(index) {
      const pathArr = ['/pages/index/index','/pages/category/index','/pages/activity/index','/pages/mine/index']
      if (index != 0) {
        uni.reLaunch({
          url: pathArr[index]
        });
      }
    },
  }
}

这样子看起来比tabbar灵活很多，可以使用自定义图标。但也有不足之处。

自定义tabBar的性能体验会低于原生tabBar，而且每个tab页都要写一遍以上的配置，比较麻烦