用vant 自定义小程序tabBar

官方自定义的tabBar容易闪烁、并且tabBar页面需写成组件形式，不喜欢。

测试了下，用vant的效果比较好，记录下。

1. 在app.json的同级界面下创建custom-tab-bar 文件夹 包含 index.js index.json 
2. 定义app.json。
3. 在tabBar的的页面下onShow生命周期加上，如果不加点击会错乱

    this.getTabBar().init();

custom-tab-bar.wxml

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#4859E5" inactive-color="#CDCDCD">
  <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>

custom-tab-bar.js

const app = getApp()

Component({
	data: {
    active: 0,
    list: [{
            url: "/pages/index/index/index",
            text: "首页",
            normal: "/utils/tabBarImg/index.png",
            active: "/utils/tabBarImg/index-active.png"
          }, {
            url: "/pages/exchange/exchange/exchange",
            text: "兑换",
            normal: "/utils/tabBarImg/exchange.png",
            active: "/utils/tabBarImg/exchange-active.png"
          }, {
            url: "/pages/mine/mine/mine",
            text: "我的",
            normal: "/utils/tabBarImg/mine.png",
            active: "/utils/tabBarImg/mine-active.png"
          }],
		
	},

	methods: {
		onChange(event) {
			this.setData({ active: event.detail });
			wx.switchTab({
				url: this.data.list[event.detail].url
			});
		},

		init() {
			const page = getCurrentPages().pop();
			this.setData({
				active: this.data.list.findIndex(item => item.url === `/${page.route}`)
			});
		}
	}
});

app.json

{
  "pages": [
    "pages/index/index/index",
    "pages/logs/logs",
    "custom-tab-bar/index",
    "pages/mine/mine/mine",
    "pages/exchange/exchange/exchange"
  ],
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "useExtendedLib": {
    "weui": true
  },
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/exchange/exchange/exchange",
        "text": "兑换"
      },
      {
        "pagePath": "pages/mine/mine/mine",
        "text": "我的",
        "iconPath": "utils/tabBarImg/mine.png",
        "selectedIconPath": "utils/tabBarImg/mine-active.png"
      }
    ]
  }
}