微信小程序自定义tabbar

<!-- 首先在page下面创建home首页页面，只用来存放我们的tabbar --><van-tabbar active="{{ active }}" bind:change="onChange"> <van-tabbar-item name="index" icon="home-o">首页</van-tabbar-item> <van-tabbar-item name="search" icon="search">搜索页</van-tabbar-item> <van-tabbar-item name="shapping" icon="friends-o">商品页面</van-tabbar-item> <van-tabbar-item name="new" icon="setting-o">最新页面</van-tabbar-item></van-tabbar><!-- 放置tabbar的对应的组件，点击tabbar让对应的组件显示 --><view hidden="{{ active === ‘index‘ ? false : true }}"> <first-page></first-page></view><view hidden="{{ active === ‘search‘ ? false : true }}"> <search></search></view><view hidden="{{ active === ‘shapping‘ ? false : true }}"> <shapping></shapping></view><view hidden="{{ active === ‘new‘ ? false : true }}"> <new></new></view>

// 在home下的index.json中注册这些组件{ "usingComponents": { "van-tabbar": "@vant/weapp/tabbar/index", "van-tabbar-item": "@vant/weapp/tabbar-item/index", "first-page": "/components/index/index", "search": "/components/search/index", "shapping": "/components/shapping/index", "new": "/components/new/index", "dong": "/components/dong/index" }}// home下的index.jsPage({ data: { active: ‘index‘, }, // 点击之后重新设置路由 onChange (event) { this.setData({ active: event.detail }) },})/*还有一种方法就是在每个路由页面放置一个tabbar组件，控制管理交给全局app.js去处理，但是这样的缺点就是在跳转路由的时候，tabbar会有短暂的闪烁，所有上面的写法是最美的解决方法了 */