微信小程序自定义tabBar

官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html?search-key=%E8%87%AA%E5%AE%9A%E4%B9%89tabbar
 

大概分为这么几步

方法1：使用getTabBar()

1.在app.js里配置好相关参数 custom:true （允许自定义tabbar）

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/pk/pkindex/pkindex",
        "text": "PK赛"
      }
    ]
  },

看了好几篇博文都说tabBar的配置要写完整 但是我这样写目前没发现什么毛病，大家不要学我 还是写完整的吧，具体可以参照文章末尾的链接

2.在app.js同级新建组件 custom-tab-bar 格式如图 严格按照红框里的名称来

3.在需要显示tabbar的页面里的 onShow里添加代码 注：getTabBar() 不兼容 2.5.0以下的基础库，所以我建议用下面的第二种方法~

selected:0 这个是用来设置选中的是第几个图标 具体要看你在组件里用的是哪个字段

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

方法2：引用组件

1.在app.js里配置好相关参数 custom:true （允许自定义tabbar） 同上

2.写一个tabbar的组件

3.在需要的页面引用组件

4.跳转的时候使用 

wx.switchTab({
  url: url
});

搞定，而且不用担心基础库的问题

 

参考文章 https://www.jianshu.com/p/608404463c35?utm_campaign=hugo