小程序 tabbar

tabbar 实现方案

• 使用系统默认的 tabbar
• 使用系统自定义的方式
• 使用 weui 组件库
• 自定义 tabbar

1、使用默认的 tabbar

app.json 直接配置:

    "list": [{
        "pagePath": "pages/main/main",
        "text": "首页",
        "iconPath": "images/tabbar/main_n.png",
        "selectedIconPath": "images/tabbar/main_s.png"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "iconPath": "images/tabbar/classify_n.png",
        "selectedIconPath": "images/tabbar/classify_s.png"
      }
    ]

2、使用系统自定义的方式

官方文档：自定义 tabBar

app.json 配置

• 在 app.json 中的 tabBar 项指定 custom 字段

"tabbar":{
  "custom":true,
}

• 同时其余 tabBar 相关配置也补充完整，这里的字段并不会作用于自定义 tabbar 渲染，其作用是为了保证低版本兼容以及区分哪些页面是 tab 页。

  "tabBar": {
    "custom": true,
    "color": "#8a8a8a",
    "selectedColor": "#ff4e00",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "/components/custom-tab-bar/component.png",
        "selectedIconPath": "/components/custom-tab-bar/component-on.png",
        "text": "index",
        "iconClass": "icon-homefill",
        "iconTopClass": ""
      }, {
        "pagePath": "pages/index2/index2",
        "iconPath": "/components/custom-tab-bar/component.png",
        "selectedIconPath": "/components/custom-tab-bar/component-on.png",
        "text": "index",
        "iconClass": "cu-btn icon-add bg-green shadow",
        "iconTopClass": "add-action"
      }, {
        "pagePath": "pages/index3/index3",
        "iconPath": "/components/custom-tab-bar/component.png",
        "selectedIconPath": "/components/custom-tab-bar/component-on.png",
        "text": "自定义",
        "iconClass": "icon-my",
        "iconTopClass": ""
      }
    ]
  },

提供一个自定义组件来渲染 tabBar：

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文件夹，文件夹下建立相应的组件。

custom-tab-bar.png

wxml 文件：

<!--miniprogram/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 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

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: "/index/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
      })
    }
  }
})

tabbar 的配置主要在这里。

设置tab的选中状态：

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

  onShow(){
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0  //当前页面索引，取值 0、1、2、3...
      })
    }
  },

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

3、使用 weui 组件库

官方文档Tabbar。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

app.json 配置：

  "useExtendedLib": {
    "weui": true
  },

在 tab 页面的 page.json 中引入 tabbar 组件即可：

  "usingComponents": {
    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
  }

wxml 使用：

<mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>

4、自定义 tabbar

直接将第二种方式使用系统自定义的方式custom-tab-bar/index文件夹及文件移动到 components 自定义组件文件夹中 ，并将 app.json 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

自定义 tabbar 优点

1. 在页面跳转时，不用考虑页面是不是 tab 地址，直接使用 wx.navigateTo 跳转。

2. 使用灵活，哪个页面需要使用 tabbar ，只需要将组件引入，并实例化即可。甚至可以在每个 tab 上扩展出像公众号那样折叠式菜单。

自定义 tabbar 缺点：

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度；而自定义的 tabbar 则没有计算 tabbar 高度，即windowsHeight = 屏幕高-状态栏高度-导航条高度。