小程序自定义tabbar

微信小程序自定义tabbar

1.介绍：微信自带的tabbar已经无法满足我们的需求了，往往我们需要自定义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.js

Page({

    data: {
        active: 'index',
    },

    // 点击之后重新设置路由
    onChange (event) {
        this.setData({
          active: event.detail
        })
    },

})



/*

还有一种方法就是在每个路由页面放置一个tabbar组件，控制管理交给全局
app.js去处理，但是这样的缺点就是在跳转路由的时候，tabbar会有短暂的闪烁，所有上面的写法是最美的解决方法了 

*/