小程序自定義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會有短暫的閃爍，所有上面的寫法是最美的解決方法了 

*/