微信小程序自定义tabBar的使用

微信提供了两个导航组件，一个是Navigation，另外一个是Tabbar。

现在来讲一下Tabbar的自定义组件。

一、自定义tabBar需要注意的问题

为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image组件渲染样式，以保证 tabBar 层级相对较高。
每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

上面这些都是微信小程序官方文档里说的。下面开始通过代码来说明应该怎么配置。

二、我们的自定义组件custom-tab-bar

如何使用：

在项目根目录放入custom-tab-bar页面文件夹(内含4个文件)，接着修改里面的配置
在app.json中加入tabBar
在每个需要使用tabBar的页面的json中加入：{"usingComponents": {}}，也可以在custom-tab-bar中全局声明
在每个需要使用tabBar的页面的js中加入判断tabBar的代码，下面会讲

1、custom-tab-bar的结构

就是一个正常的页面：

custom-tab-bar/
      index.js
      index.json
      index.wxml
      index.wxss

需要注意的是：custom-tab-bar文件夹需要放在根目录下面，作为入口文件。

custom-tab-bar/index.js

#custom-tab-bar/index.js
Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件"
    }, {
      pagePath: "/index2/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "接口"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

上面是官方提供的demo，我们按上面配置即可。讲解一下比较重要的：

data:主要的配置都在这里
    selected
        默认选中状态，0为第一个
    list
        这里就是你的tabBar，需要几个就在这里面添加，最少2个，最多5个
        pagePath：页面的路径
            [提醒注意]--->路径的前面需要添加" / "，而app.json中list的pagePath是不能以" / "开头的，一定要注意，不然wx.switchTab在调用时会出错。
        iconPath:图标路径
        selectedIconPath:被选中时的图标路径
        text:名称
methods方法：tabBar跳转和页面跳转
    e.currentTarget.dataset：通过e调取当前页数据，点击的tabbar，即要跳转的页面
    data.path：获取路径
    wx.switchTab()：跳转到tabBar页面，并关闭其他所有非tabBar页面
        url：需要跳转的tabBar页面的路径
        success：成功回调函数
        fail：失败回调函数
        complete：接口调用结束回调函数
        this.setData()：把下标赋值给selected

custom-tab-bar/index.json

#custom-tab-bar/index.json
{"component": true}    这里我设置成true和false没有变化，官方文档默认是true，具体我也没研究，待定。

custom-tab-bar/index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

官方推荐使用cover-view和cover-image，保证tabBar层级相对较高，也就是可以在其他的上面显示。

2、app.json的配置

"tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "index/index",    此处的路径前面不加" / "
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "index2/index2",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      }
    ]
  }

注意：tabBar页面都需要在app.json的pages中注册路径。

3、使用tabBar页面的js文件

在文件中的onShow()方法中加入下面所示代码：

onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  }

完成这些我们就可以使用tabBar了。如果需要跳转到非tabBar页面则不能使用wx.switchTab(Object object)方法。

写在最后：

如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
文章我也会根据所学到新的知识不断更新。