微信小程序实现底部导航栏自定义tabBar

重要!!!
1.custom-tab-bar组件目录位置一定要和pages同级,不能放在自定义的components文件夹内,不然底部导航栏跳转异常。

微信小程序实现底部导航栏自定义tabBar_第1张图片
2.转跳的目标页面在onShow生命周期一定要有以下代码,因为跳转后选中的值会初始化,为了防止选中的值重置。(备注:如果第1点没做到,this.getTabBar()会undefined,无法调用setData()方法赋值,故custom-tab-bar组件一定要和pages同级)

onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0 // 选中的tabBar
      })
    }
  },

微信官方自定义tabBar示例

你可能感兴趣的:(分享,实践,小程序,微信)