van微信小程序组件tabbar标签使用

1. 根目录新建文件 custom-tab-bar
2. 在custom-tab-bar右键新建Component，index文件

index.js文件data内容为

Component({
properties: {},
data: {
active: 0,
// 菜单列表
list: [{
    "url": "/page/home/home", //地址
    "icon": "wap-home-o", //图标
    "info": '', //小红点
    "text": "首页"
  },
  {
    "url": "/page/me/me",
    "icon": "user-o",
    "info": '',
    "text": "个人中心"
  }
]
},
/**
*组件方法列表
**/
methods: {
onChange(e) {
  // event.detail 的值为当前选中项的索引
  this.setData({
    active: e.detail
  });
  wx.switchTab({
    url: this.data.list[e.detail].url
  });
},
init() {
  const page = getCurrentPages().pop();
  this.setData({
    active: this.data.list.findIndex(item => item.url === `/${page.route}`)
  });
}
}
})

index.wxml中添加如下内容

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

在app.json中加入

"tabBar": {
"custom": true,
"list": [
  {
    "pagePath": "page/home/home",
    "text": "首页"
  },
  {
    "pagePath": "page/me/me",
    "text": "个人中心"
  }
]
},

和以上tabBar和sitemapLocation同一级

在page下新建文件home和me目录，并分别新建Page，home和me文件。分别在home.js和me.js中的onShow函数下添加如下内容

this.getTabBar().init();

结束

遇到问题下方导航不显示

解决方式：小程序开发者工具右上角详情中的本地设置。调试基础库设置为最新版本。