小程序自定义TabBar实现动态配置_钉钉小程序配置tabbar

小程序自定义TabBar

需求背景：根据用户的不同种类，来展示不同的tab菜单
实现方案：主要根据官方提供的自定义TabBar方法
方案描述：

1. 在app.json 中的 tabBar 项指定 “custom”: true，同时将两套tab的path配置到tabBar项中 （注意：tabbar最多限制只能配置五个），不在app.json中配置会出现无法跳转或者不展示tabBar的情况
   例：根据自己的需求将tabBar配置好

//app.json的tabBar配置
 "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": "index/index2",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 根据官方提示，在根目录下创建custom-tab-bar文件（component），该组件完全接管tabBar的渲染，在组件中根据当前用户类型，动态配置当前展示的tabBar

// custom-tab-bar.js
Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: TabBarA // 设置默认tabBar
  },
 // 每次点击tab页会触发custom-tab-bar组件的attached()方法
 // type指的是用户类型，TabBarA、TabBarB指的是不同用户的tabBar具体的配置
  attached() {
    this.setData({
      list: type === 1 ? TabBarA : TabBarB
    })
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3. 在每一个tab页面，加上对tab的选中效果处理，自定义tabBar组件提供getTabBar()方法，可获取当前页面下的自定义 tabBar 组件实例

 //tab页面的onshow方法的配置，组件可在show()方法中设置
 if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0 //当前选中的tab索引，设置选中状态
        })
      }
1
2
3
4
5
6
7

具体自定义tabBar的demo可参考官方文档：官方文档地址
遇到的问题： 由于限制tabBar只能配置5个，在我们的tabBar超出数量范围的情况可参考以下方案:

	1）将tabBar封装为组件在不同的Tab页面引入即可，每次点击做一次跳转，该方案不需要思考tabBar的配置问题，本质上和其他的页面是一样的，页面看起来可以实现tabBar的效果，由于每次跳转都要刷新页面，所以会存在闪动问题，但可以解决超过5个tab的限制进行个性化设计。
	
	2）将Tab的每个页面作为组件，将tabBar作为当前的page页，根据点击的tab不同，展示不同的组件，可以实现tabBar的切换，同时也解决了闪动的问题。
	
	3）对于处理逻辑不复杂的页面，例如 "我的" 页面大部分都是类似的，也可以考虑共用同一个path，但是不太建议这样做，后期维护会比较麻烦
1
2
3
4
5

目前官方文档对于自定义tabBar的说明较少，期待后期的改善，方案仅供参考，希望能帮助到有自定义tabBar需求的伙伴们，有问题欢迎指正~