小程序自定义vantweapp底部导航栏

1 配置app.json配置

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

注意1：custom开启时读取自定义底部导航栏，关闭时读取下面的；<br>注意2：自定义导航栏文件价名、位置<br>注意3：小程序启动的首页设置为导航栏第一个url"tabBar": {     "custom": true,     "list": [       {         "pagePath": "pages/home/home",         "text": "流水",         "iconPath": "image/icon_component.png",         "selectedIconPath": "image/icon_component_HL.png"       },       {         "pagePath": "pages/add/add",         "text": "记一笔",         "iconPath": "image/icon_API.png",         "selectedIconPath": "image/icon_API_HL.png"       }     ]   }

2 新建自定义导航栏文件夹、page。这里的文件夹名一定是 custom-tab-bar，然后在创建 index 组件（index命名也不能随便改，就用 index，否则无法识别）。

3.代码

index.wxml

<van-tabbar active="{{ active }}" active-color="#63bce9" inactive-color="#000" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index"> 
    <image slot="icon" src="{{ item.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="{{ item.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

index.js

Component({
  /**
   * 组件的初始数据
   */
  data: {
    active: null,
    "list": [
      {
        "pagePath": "/pages/home/home",
        "text": "流水",
        "normal": "/image/icon_component.png",
        "active": "/image/icon_component_HL.png"
      },
      {
        "pagePath": "/pages/add/add",
        "text": "记一笔",
        "normal": "/image/icon_API.png",
        "active": "/image/icon_API_HL.png"
      }
    ]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange:function(e){
      const i = e.detail;
      wx.switchTab({
        url: this.data.list[i].pagePath,
      })
      console.log("1");
      this.setData({
        active : i
      })
    },
    init() {
      const page = getCurrentPages().pop();
      console.log("3",this.data.list.findIndex(item => item.pagePath === `/${page.route}`));
      this.setData({
     　  active: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
      });
     }
  }
})

目标地址home.wxml

  onShow() {
    console.log("2.1");
    this.getTabBar().init();
  },

home.json

{
  "component": true,
  "usingComponents": {}
}

参考链接：

https://developer.aliyun.com/article/1387164

https://blog.csdn.net/weixin_40874076/article/details/141816558

https://developers.weixin.qq.com/community/develop/article/doc/000ac8fca404d002df0b97ccf5b013

https://developer.aliyun.com/article/1387164