微信小程序自定义tabbar底部菜单

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

在自定义 tabBar 模式下，为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

app.json 中添加 tabBar 字段：

"tabBar": {
    
    
  "custom": true,
  "color": "#666666",
  "selectedColor": "#FF5F15",
  "backgroundColor": "#ffffff",
  "borderStyle": "white",
  "list": [
    {
    
    
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
    
    
      "pagePath": "pages/service/service",
      "text": "服务"
    },
    {
    
    
      "pagePath": "pages/order/order",
      "text": "订单"
    },
    {
    
    
      "pagePath": "pages/user/user",
      "text": "我的"
    }
  ]
}

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

添加自定义 tabBar 代码文件，在项目根目录添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

这里我使用了 vant-weapp 的tabbar组件，所以需要先安装下vant：

npm install @vant/weapp

文件代码：

// custom-tab-bar/index.js
Component({
    
    
  data: {
    
    
    active: 0,
    list: [
	  {
    
    
	    text: '首页',
	    url: 'pages/index/index',
	    icon: 'home',
	    activeIcon: 'home-select'
	  },
	  {
    
    
	    text: '服务',
	    url: 'pages/service/service',
	    icon: 'service',
	    activeIcon: 'service-select'
	  },
	  {
    
    
	    text: '订单',
	    url: 'pages/order/order',
	    icon: 'order',
	    activeIcon: 'order-select'
	  },
	  {
    
    
	    text: '我的',
	    url: 'pages/user/user',
	    icon: 'user',
	    activeIcon: 'user-select'
	  },
	];
  },
  methods: {
    
    
    onChange(event) {
    
     // 切换tab页面
      this.setData({
    
     active: event.detail });
      wx.switchTab({
    
    
        url: this.data.list[event.detail].url.startsWith('/')
          ? this.data.list[event.detail].url
          : `/${
      
      this.data.list[event.detail].url}`,
      });
    },

    init() {
    
     // 设置tab的active下标（icon）
      const page = getCurrentPages().pop();
      const route = page ? page.route.split('?')[0] : '';
      const active = this.data.list.findIndex(
        (item) =>
          (item.url.startsWith('/') ? item.url.substr(1) : item.url) ===
          `${
      
      route}`,
      );
      this.setData({
    
     active });
    },
  },
});

// custom-tab-bar/index.json
{
    
    
  "component": true,
  "usingComponents": {
    
    
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

<!-- custom-tab-bar/index.wxml -->
<van-tabbar 
  active="{
     
     { active }}" 
  bind:change="onChange"
  inactive-color="#999999"
  active-color="#f35000"
>
  <van-tabbar-item class="custom-tab-bar-wrapper" custom-class="custom-tabbar-item" wx:for="{
     
     {list}}" wx:key="index">
    <iconfont slot="icon" name="{
     
     {item.icon}}" size="36"/>
    <iconfont slot="icon-active" name="{
     
     {item.activeIcon}}" size="36"/>
    <view class="text">{
   
   { item.text }}</view>
  </van-tabbar-item>
</van-tabbar>

/* custom-tab-bar/index.wxss */
.custom-tab-bar-wrapper {
    
    
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-tab-bar-wrapper .text {
    
    
  font-size: 24rpx;
}

.custom-tab-bar-wrapper .tab-icon {
    
    
  width: 40rpx;
  height: 40rpx;
}

.custom-tabbar-item {
    
    
  width: 100% !important;
}

在tabbar的page js中的onShow方法中加入：

// pages/service/service.js
onShow() {
    
    
  this.getTabBar().init() // 设置tabbar active状态
},

然后在微信开发者工具，【工具】-> 【构建npm】，重新编译。

tabbar中的图标是用的 iconfont 全局组件，详细使用参考另一篇博客：微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)