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

Myth丶恋晨 2021-07-27 01:13 700阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70][]

// 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文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 1][]

{
      "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();
      },

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70]: /images/20210726/04b53e0039024d7c82a1168d016e1c46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 1]: /images/20210726/c5668f45e23e40e4b6ff5f1da43a8b87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70 2]: /images/20210726/0a904ecc61ac41a58f1109f091610561.png