import {

  storeBindingsBehavior

} from "mobx-miniprogram-bindings";

import {

  store

} from "../store/store";

Page({

  behaviors: [storeBindingsBehavior],

  storeBindings: {

    store,

    fields: {

      activeTabBar: () => store.activeTabBar,

      showTabBarDot: () => store.showTabBarDot

    },

    actions: {

      changeTab: 'changeTab'

    }

  },

  /**

   * 页面的初始数据

   */

  data: {

    list: [{

        pagePath: "/pages/index/index",

        iconPath: "/images/tabbar/menu1.png",

        selectedIconPath: "/images/tabbar/menu2.png",

        key: 'home',

        text: "主页",

      },

      {

        pagePath: "/pages/index/index",

        iconPath: "/images/tabbar/menu3.png",

        selectedIconPath: "/images/tabbar/menu4.png",

        key: 'contact',

        text: "咨询",

      },

      {

        pagePath: "/pages/store_nobody/index",

        iconPath: "/images/tabbar/menu5.png",

        selectedIconPath: "/images/tabbar/menu6.png",

        key: 'store_nobody',

        text: "门店查询",

      },

      {

        pagePath: "/pages/mine/index",

        iconPath: "/images/tabbar/menu7.png",

        selectedIconPath: "/images/tabbar/menu8.png",

        key: 'mine',

        text: "我的",

      },

    ],

  },

  onChange(e) {

    const index = e.detail

    const key = this.data.list[index].key

    if (key !== 'contact') {

      const path = this.data.list[index].pagePath

      this.changeTab(index)

      wx.switchTab({

        url: path,

      })

    }

  },

})

上面是js,下面是wxml

<van-tabbar active="{{ activeTabBar }}" bind:change="onChange" active-color="#e67800">

  <block wx:for="{{list}}" wx:key="*this">

    <van-tabbar-item dot="{{index === 3 && showTabBarDot}}" class="tab-item">

      <image slot="icon" src="{{ item.iconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />

      <image slot="icon-active" src="{{ item.selectedIconPath }}" mode="aspectFit" style="width: 25px; height: 25px;" />

      {{item.text}}

      <button wx:if="{{item.key === 'contact'}}" open-type="contact" class="contact-btn"></button>

    </van-tabbar-item>

  </block>

</van-tabbar>

这些是自定义的，在app.json中我默认设置了list

   "tabBar": {

        "color": "#999",

        "selectedColor": "#333",

        "borderStyle": "black",

        "backgroundColor": "#ffffff",

        "custom": true,

        "list": [

            {

                "pagePath": "pages/index/index",

                "iconPath": "images/tabbar/menu1.png",

                "selectedIconPath": "images/tabbar/menu2.png",

                "text": "主页"

            },

            {

                "pagePath": "pages/store_nobody/index",

                "iconPath": "images/tabbar/menu5.png",

                "selectedIconPath": "images/tabbar/menu6.png",

                "text": "门店查询"

            },

            {

                "pagePath": "pages/mine/index",

                "iconPath": "images/tabbar/menu7.png",

                "selectedIconPath": "images/tabbar/menu8.png",

                "text": "我的"

            }

        ]

    },

我设置的显示自定义组件，但是pc端打开显示的这默认的三个，手机端没问题