微信小程序自定义tabBar

参考文档#

存在的问题#

切换时tabBar闪烁，经过测试发现每个页面所使用的tabBar是独立实例，要避免闪烁需要修改示例代码，原始示例代码如下

官网提供的示例代码-摘录#

`custom-tab-bar/index.js`#

1
Component({
2
  data: {
3
    selected: 0,
4
    color: "#7A7E83",
5
    selectedColor: "#3cc51f",
6
    list: [{
7
      pagePath: "/index/index",
8
      iconPath: "/image/icon_component.png",
9
      selectedIconPath: "/image/icon_component_HL.png",
10
      text: "组件"
11
    }, {
12
      pagePath: "/index/index2",
13
      iconPath: "/image/icon_API.png",
14
      selectedIconPath: "/image/icon_API_HL.png",
15
      text: "接口"
16
    }]
17
  },
18
  attached() {
19
  },
20
  methods: {
21
    switchTab(e) {
22
      const data = e.currentTarget.dataset
23
      const url = data.path
24
      this.setData({
25
        selected: data.index
26
      })
27
    }
28
  }
29
})

`index/index.js`#

1
Component({
2
  pageLifetimes: {
3
    show() {
4
      if (typeof this.getTabBar === 'function' &&
5
        this.getTabBar()) {
6
        this.getTabBar().setData({
7
          selected: 0
8
        })
9
      }
10
    }
11
  }
12
})

优化方案#

既然每个页面都是tabBar独立实例，那么就不需要重复去修改selected这个变量，修改这个变量会触发重新渲染tabBar，也是造成闪烁的原因，修改方案

在custom-tab-bar/index.js的switchTab方法中移除以下代码

1
this.setData({
2
    selected: data.index
3
})

在index/index.js中改为以下代码

1
Component({
2
    pageLifetimes: {
3
        show() {
4
            if (typeof this.getTabBar === 'function' &&
5
                this.getTabBar()) {
6
                this.getTabBar().setData({
7
                    selected: 0
8
                })
9
            }
10
        }
11
    },
12
});

实际就是让selected这个变量在tabBar中只设置一次，这样可以做只有第一次点击某个tabBar图标时闪烁一次，再次切换不再闪烁，当然如果想要一次闪烁都没有的情况下自定义tabBar那只能使用单页了。