小程序自定义tabbar

1、在根目录创建入口文件，如下图所示:

2、配置信息

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

3、 编写 tabBar 代码

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

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

const app = getApp();
Component({
	data: {
		active: 0,
		list: [
			{
				icon: 'wap-home-o',
				text: '首页',
				url: '/pages/index/home/home',
				pagetum: 'switchTab'
			},
			{
				icon: 'apps-o',
				text: '工作台',
				url: '/pages/workBench/index/index',
				pagetum: 'switchTab'
			},
			{
				icon: 'newspaper-o',
				text: '本会快讯',
				url: '/pages/newsBreakfast/index/index',
				pagetum: 'switchTab'
			},
			{
				icon: 'manager-o',
				text: '我的',
				url: '/pages/personal/myPage/my',
				pagetum: 'switchTab'
			}
		]
	},
	methods: {
		onChange(event) {
			this.setData({ active: event.detail });
			var pagetum = this.data.list[event.detail].pagetum;
			wx.switchTab({
				url: this.data.list[event.detail].url
			});
			// console.log(this.data.list[event.detail].url)
		},
		// tab调用
		init() {
			const page = getCurrentPages().pop();
			this.setData({
				active: this.data.list.findIndex(item => item.url === `/${page.route}`)
			});
		}
	}
});

//页面调用
  onShow: function () {
    this.getTabBar().init();
  },