小程序tabbar這套方案全搞定！

關於微信小程序的tarbar，相信大家都不會陌生 在實現小程序微信原裝的tabbar卻比較呆板，不夠精緻，每每不符合本身的要求

• 這個時候怎麼辦呢
  這套方案接着！
  

先簡單的來講一下主要思想:
自定義字體圖標組件以及tabbar組件，在tabbar中引用自定義字體圖標組件。

先說一下這套方案的優勢：

1. 圖片換成字體,體積小,請求減小,性能提升
2. 本身定義tabbar,可以從細節各方面達到本身的要求，精確到1像素
3. 組件能夠根據本身的條件來更換tabbar圖標（好比你點進一個頁面想把這個頁面的tabbar樣式本身更換） 總而言之就是自由性很大，精準性良好，可以去爲所欲爲的打造你的專屬tabbar!

實現這套方案核心仍是自定義組件

那就從這開始聊：
一個自定義組件由 json wxml wxss js 4個文件組成。

• 一個頁面要引用一個組件時只須要在該頁面的json配置下添加以下

{
//聲明引用一個組件 配置好你的組件引用路徑
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
複製代碼

• 而後再頁面上添加組件的標籤便可。

//這樣就可以在你的頁面中添加組件
<icon type="" color="" size=""/>
複製代碼

若是對於組件的定義仍有疑惑的能夠參考這份文檔： 官方關於自定義組件的文檔

OK 下面咱們正式來說這份方案：

1. 先定義字體圖標組件，在阿里圖標庫裏面挑選好你所須要的字體選擇下載代碼。
   這裏我選擇的是其中的_fontclass方案，
2. 把iconfont.css內的內容拷貝到你建立的icon目錄下的index.wxss

3. 將該目錄下index.json添加

{  
//聲明這一組文件設爲自定義組件
  "component": true,
  "usingComponents": {}
}
複製代碼

4. 在index.wxml中定義該組件的結構

<!-- 注意style裏面的分號！ -->
<text class="iconfont icon-{{type}}" style="color:{{color}}; font-size:{{size}}rpx" ></text>
複製代碼

5. 在js裏面配置他的屬性

//這裏定義了3個自定義屬性他們經過{{}}與wxml中的數據鏈接起來
 Component({
  properties: {
    type: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: '#000000'
    },
    size: {
      type: Number,
      value: '45'
    }
  }
})
複製代碼

到此，字體圖標組件搞定。

如今開始第二步，搞定tabbar組件。

1. 首先作在json中添加配置

{
  "component": true,
  //聲明對字體圖標組件的引用
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
複製代碼

2. 寫wxml結構

<view class="weibo-tabbar" >
//綁定回首頁事件，此處的data-hi中的數據是爲了傳遞到e.currentTarget.dataset.hi
//經過這個數據咱們能夠用來判斷是否處於首頁，而後在js中配置能夠阻擾原地跳轉
    <view class="item-left"  bindtap="goHome" data-hi="{{isIndex}}">
            <icon type="shouye" color="{{isIndex?'#000000':'#b1b1b1'}}" size="45"/>
            <text class="1" style="color:{{isIndex?'#000000':'#b1b1b1'}}">首頁</text>
    </view>
    <block wx:if="{{isInner}}">
        <view class="item-right" style="color:#b1b1b1" bindtap="goShare">
        <icon type="fenxiang" color="gray" size="45"/>
            <text class="2">分享</text>
        </view>
    </block>
    <block wx:else>
        <view class="item-right"  bindtap="goInfo" data-hi="{{isIndex}}">
        <icon type="wode" color="{{isIndex?'#b1b1b1':'#000000'}}" size="45"/>
            <text class="2" style="color:{{isIndex?'#b1b1b1':'#000000'}}">個人</text>
        </view>
    </block>
</view>
複製代碼

3. 再配置js屬性及方法

const app = getApp();
Component({
  properties: {
    isIndex: { // 是否主頁            
      type: Boolean,
      value: false,
    },
    isInner: { //是否內部頁面
      type: Boolean,
      value: false,
    },
  },
  data: {
    // 這裏是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這裏是一個自定義方法
    goHome: (e) => {
      // 判斷是否爲主頁面防止原地跳轉
      if(!e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/index/index"
        })
      }
    },
    goShare: function () {
    },
    goInfo: (e) => {
        if(e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/info/info"
        })
      }
    }
  }
})
複製代碼

4. 配置樣式wxss

.weibo-tabbar {
    bottom: 0;
    height: 97rpx;
    padding: 12rpx 0rpx;
    display: flex;
    width: 100%;
    position: fixed;
    background: #ffffff;
    box-sizing: border-box;
}
//產生優雅的0.5px邊框
.weibo-tabbar::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 0;
    left: 0;
    border-top: 1rpx solid rgba(177, 177, 177, 0.4);
    transform: scale(0.5);
    transform-origin: 0 0;
  }
  //這裏用flex佈局，移動端flex佈局確實很爽
  .weibo-tabbar .item-left, .item-right{
   //這裏有一處坑，若不不設置他的層級變大的話
   //你是點不到這個item按鈕的，固然也不會產生觸碰事件
    z-index: 999;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20rpx;
    color: #b1b1b1;
}
.shouye, .wode {
    height: 45rpx;
    width: 45rpx;
}
複製代碼

到此你只須要在你的頁面優雅的添加一行，就能在你的頁面中產生tabbar

//此處isIndex是給組件的屬性傳輸值，別屬性不添加即爲默認屬性值
<tabbar isIndex="true"></tabbar>
複製代碼

結果：

哇，看了半天就出這麼一個小東西！
其實大道至簡
掌握這套方案可以適配你須要的全部tabbar
他的顏色、大小、位置均可以本身掌控，重要的是這個解決方案。

最後強調一下里面的一些坑

1. 按鈕的樣式層級z-index要提升
2. 屬性值與{{}}傳輸的把握
3. style="color:{{color}}; font-size:{{size}}" 注意裏面的;號

以爲不錯的話能夠點個贊鼓勵一下喲