一、前言

产品需求：当用户未授权用户信息的情况下，点击小程序tabbar组件跳出授权信息弹框；若用户已授权用户信息，则点击tabbar组件跳转到相应的地址。
由于小程序原生tabbar组件无法提供支持，所以需要自定义tabbar组件

二、代码步骤

2.1 配置信息
在 pages.json中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置代码如下：

"tabBar": { 
    "custom": true, 
    "color": "#AAAAAA", 
    "selectedColor": "#C89D66", 
    "borderStyle": "white", 
    "backgroundColor": "#ffffff", 
    "list": [ 
        { 
            "pagePath": "pages/home/Index", 
            "iconPath": "static/images/tabBar/icon_home.png", 
            "selectedIconPath": "static/images/tabBar/icon_home_active.png", 
            "text": "首页" 
        }, 
        { 
            "pagePath": "pages/test/Index", 
            "iconPath": "static/images/tabBar/icon_test.png", 
            "selectedIconPath": "static/images/tabBar/icon_test_active.png", 
            "text": "检测" 
        }, 
        { 
            "pagePath": "pages/my/Index", 
            "iconPath": "static/images/tabBar/icon_my.png", 
            "selectedIconPath": "static/images/tabBar/icon_my_active.png", 
            "text": "我的" 
        } 
    ] 
},

2.2 添加 tabBar 代码文件

在代码根目录下添加入口文件:custom-tab-bar/index.js、custom-tab-bar/index.json、
custom-tab-bar/index.wxml、custom-tab-bar/index.wxss

custom-tab-bar/index.wxml

<view class="tab-bar"> 
  <view class="tab-bar-border"></view> 
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> 
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image> 
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view> 
  </view> 
</view>

custom-tab-bar/index.js

真机调试和预览模式下wx.switchTab跳转到tabbar的时候会出现返回到上一页再回到 tabbar 的页面，这个现象原生的TabBar也存在，可以使用wx.reLaunch 替代
自定义 tabBar 图片使用base64或本地图片，防止发生闪烁的现象

Component({ 
  data: { 
    selected: 0, 
    color: '#AAAAAA', 
    selectedColor: '#C89D66', 
    borderStyle: 'white', 
    backgroundColor: '#ffffff', 
    // 自定义 tabBar 图片使用base64或本地图片， 防止发生闪烁的现象 
     list: [ 
      { 
        "pagePath": "/pages/home/Index", 
        "iconPath": "/static/images/tabBar/icon_home.png", 
        "selectedIconPath": "/static/images/tabBar/icon_home_active.png", 
        "text": "首页" 
    }, 
    { 
        "pagePath": "/pages/test/Index", 
        "iconPath": "/static/images/tabBar/icon_test.png", 
        "selectedIconPath": "/static/images/tabBar/icon_test_active.png", 
        "text": "检测" 
    }, 
    { 
        "pagePath": "/pages/my/Index", 
        "iconPath": "/static/images/tabBar/icon_my.png", 
        "selectedIconPath": "/static/images/tabBar/icon_my_active.png", 
        "text": "我的" 
    } 
    ], 
  }, 
  methods: { 
    // 切换 tab 
    switchTab(e) { 
      const data = e.currentTarget.dataset 
      const url = data.path 
      // 可在此处进行业务逻辑代码判断 
      wx.switchTab({url}) 
    }, 
  }, 
})

custom-tab-bar/index.json

{ "component": true  }

custom-tab-bar/index.wxss

.tab-bar { 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 48px; 
  background: white; 
  display: flex; 
  padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom); 
} 
.tab-bar-border { 
  background-color: rgba(0, 0, 0, 0.33); 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 1px; 
  transform: scaleY(0.5); 
} 
.tab-bar-item { 
  flex: 1; 
  text-align: center; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column; 
} 
.tab-bar-item image { 
  width: 52rpx; 
  height: 52rpx; 
} 
.tab-bar-item view { 
  font-size: 10px; 
}

2.3 tabBar 组件实例调用

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例

在main.js中添加如下代码：

//使用mixin避免重复书写复制 
Vue.mixin({ 
  methods: { 
    setTabBarIndex(index) { 
      if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { 
        this.$mp.page.getTabBar().setData({ 
          selected: index, 
        }) 
      } 
    }, 
  }, 
})

在页面文件中代码：

onShow() { 
    this.setTabBarIndex(0) //index为当前tab的索引 
}

前端随笔

小程序自定义tabbar组件详解

一、前言

二、代码步骤

2.1 配置信息