微信小程序开发之自定义tabBar的实现

一、自定义tabBar的实现背景

在微信小程序开发中，tabBar的导航栏是小程序重要的导航工具，通常我们使用微信小程序自带的tabBar来实现导航功能，但是在特殊的业务场景中（如需要更多的自定义UI、不需要icon+text的组合形式等），需使用自定义tabBar来实现更好的用户体验。

二、自定义tabBar的实现

1.创建一个自定义tabBar组件

首先我们需要在小程序的根目录中创建一个components文件夹，并在该文件夹中创建我们所需的自定义tabBar组件，以下是一个示例代码：

<template>
  <view class="container">
    <view class="tab-bar">
      <view class="tabs" v-for="(item, index) in list" :key="index" @tap="clickItem(index)">
        <image :src="tabIcon(index)" class="icon" />
        <text class="text">{{ item }}</text>
      </view>
    </view>
    <view class="main-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TabBar',
    data () {
      return {
        list: ['首页', '消息', '我的']
      }
    },
    methods: {
      clickItem (index) {
        this.$emit('onChange', index)
      },
      tabIcon (index) {
        return `/img/tab${index + 1}.png`
      }
    }
  }
</script>

<style>
  .tab-bar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: white;
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
  }

  .tabs {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 11pt;
  }

  .icon {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
  }

  .text {
    color: #666666;
  }

  .text-active {
    color: #07c160;
  }

  .main-content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 50px;
  }
</style>

在该代码中，我们定义了三个tab，每个tab包含一个icon和一个text，用于标识tab的名称。我们将该component导出为“TabBar”，并将三个tab的名称和icon路径存储在list和tabIcon函数中。

2.使用自定义tabBar组件

在我们的小程序页面中，我们可以引入并使用该自定义tabBar组件，如下所示：

<template>
  <view>
    <component 
      :is="tabBar" 
      :onChange="changeTab"
    >
      <scroll-view>
        <!-- 页面内容 -->
      </scroll-view>
    </component>
  </view>
</template>

<script>
  import TabBar from '../../components/tab-bar/tab-bar'

  export default {
    data () {
      return {
        tabBar: TabBar,
        currentTab: 0
      }
    },
    methods: {
      changeTab (index) {
        this.currentTab = index
      }
    }
  }
</script>

在该示例代码中，我们引入了自定义tabBar组件“TabBar”，并将其作为component的一个子元素。通过将父组件的changeTab方法传递给子组件，我们可以在子组件点击tab时切换页面内容。

3.定义自定义tabBar样式

我们在自定义tabBar组件的样式中定义了.tab-bar和.tabs两个区域，.tab-bar表示整个tabBar的样式，.tabs表示每个tab的样式，如下所示：

.tab-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: white;
  box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.tabs {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 11pt;
}

.icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.text {
  color: #666666;
}

.text-active {
  color: #07c160;
}

在该样式中，我们定义了tabBar在底部悬浮，设置了一定的阴影效果，每个tab的布局为纵向，并定义了tab在不同状态下的样式（.text和.text-active）。

三、示例说明

1.自定义tabBar的图标风格

以上示例中的自定义tabBar组件，采用了一种较为简单的图标+文字的展示方式，但是有时候我们需要更加个性化的tabBar，可以采用一些成熟的icon图标库来实现。在Github上可以找到多个对应的小程序自定义tabBar图标库，如iconfont-weapp等。引入这些图标库，可以省去设计icon的时间成本。

2.自定义tabBar搭建流程

在实际项目中，我们不仅仅只是要自定义tabBar图标和样式，而且还需要结合不同的页面跳转和路由配置。搭建自定义tabBar的具体流程可以参考以下步骤：

（1）创建自定义tabBar组件，实现tabBar的样式和点击事件；

（2）创建子页面，通过路由跳转实现页面之间的切换；

（3）父页面引入自定义tabBar组件，并将该组件作为component的子元素，同时传递changeTab函数；

（4）在changeTab函数中，使用路由跳转实现页面的切换；

（5）在子页面可以使用onShow函数来获取父页面传递过来的参数和tab切换的状态。

以上是自定义tabBar的一个完整攻略，实现自定义tabBar涉及到UI样式、路由管理、组件通讯等多个方面，在实际开发中需要注意细节，确保代码健壮和易于维护。