小程序自定义 tabbar 以vant weapp为例

1.首先创建 custom-tab-bar 文件夹  包含 index.js  index.json index.wxml

// index.js文件

// index.js文件
Component({
  data: {
    active: 0,
    list: [
      {
        "url": "/pages/mine/mine",
        "icon": "wap-home-o",
        "text": "开单"
      },
      {
        "url": "/pages/orderMeal/orderMeal",
        "icon": "orders-o",
        "text": "点菜"
      },
      {
        "url": "/pages/getOrder/getOrder",
        "icon": "points",
        "text": "已点菜品"
      },
      {
        "url": "/pages/shopCart/shopCart",
        "icon": "user-circle-o",
        "text": "购物车"
      }
    ]
    },
    methods: {
     onChange(e) {
        console.log(e,'e')
        wx.switchTab({
          url: this.data.list[e.detail].url
        });
        this.setData({ active: e.detail });
     },
     init() {
         const page = getCurrentPages().pop();
         this.setData({
        　  active: this.data.list.findIndex(item => item.url === `/${page.route}`)
         });
        }
     }
});

index.json文件

{
  "component": true,
  "usingComponents": {
      "van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index",
      "van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index",
      "van-icon": "/miniprogram_npm/vant-weapp/icon/index"
  }
}

index.wxml文件

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
    item.text
  }}</van-tabbar-item>
</van-tabbar>

2.修改app.json

 app.json文件

{
  "pages": [
    "pages/login/login",
    "pages/index/index",
    "pages/logs/logs",
    "pages/pointTable/pointTable",
    "pages/mine/mine",
    "pages/orderMeal/orderMeal",
    "pages/getOrder/getOrder",
    "pages/shopCart/shopCart",
    "custom-tab-bar/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FF9800",
    "navigationBarTitleText": "hpos",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index",
    "van-card": "/miniprogram_npm/vant-weapp/card/index"
  },
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/mine/mine",
        "text": "开单"
      },
      {
        "pagePath": "pages/orderMeal/orderMeal",
        "text": "点菜"
      },
      {
        "pagePath": "pages/getOrder/getOrder",
        "text": "已点菜品"
      },
      {
        "pagePath": "pages/shopCart/shopCart",
        "text": "购物车"
      }
    ]
  }
}

3.最后每个使用tabbar的页面加上这一句，不加高亮显示慢一步。

  /**
   * 生命周期函数--监听页面显示   在每个tabbar页面onshow 调用即可;
   */
  onShow: function () {
    this.getTabBar().init();
  },

效果：