關于微信小程序的tarbar，相信你們都不會陌生 在實現(xiàn)小程序微信原裝的tabbar卻比較呆板，不夠精致，往往不符合自己的要求

• 這個時候怎么辦呢
  這套方案接著！
  

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

先說一下這套方案的優(yōu)點：

圖片換成字體,體積小,請求減少,性能提高

自己定義tabbar,能夠從細節(jié)各方面達到自己的要求，精確到1像素

組件可以根據(jù)自己的條件來更換tabbar圖標（比如你點進一個頁面想把這個頁面的tabbar樣式自己更換） 總而言之就是自由性很大，精準性良好，能夠去隨心所欲的打造你的專屬tabbar!

實現(xiàn)這套方案核心還是自定義組件

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

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

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

• 然后再頁面上添加組件的標簽即可。

//這樣就能夠在你的頁面中添加組件 <icon type="" color="" size=""/>

如果對于組件的定義仍有疑惑的可以參考這份文檔： 官方關于自定義組件的文檔

OK 下面我們正式來講這份方案：

先定義字體圖標組件，在阿里圖標庫里面挑選好你所需要的字體選擇下載代碼。
這里我選擇的是其中的_fontclass方案，

把iconfont.css內的內容拷貝到你創(chuàng)建的icon目錄下的index.wxss

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

{ //聲明這一組文件設為自定義組件"component": true,"usingComponents": {} }

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

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

在js里面配置他的屬性

//這里定義了3個自定義屬性他們通過{{}}與wxml中的數(shù)據(jù)連接起來Component({properties: {type: {type: String,value: ''},color: {type: String,value: '#000000'},size: {type: Number,value: '45'}} })

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

現(xiàn)在開始第二步，搞定tabbar組件。

首先做在json中添加配置

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

寫wxml結構

<view class="weibo-tabbar" > //綁定回首頁事件，此處的data-hi中的數(shù)據(jù)是為了傳遞到e.currentTarget.dataset.hi //通過這個數(shù)據(jù)我們可以用來判斷是否處于首頁，然后在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>

再配置js屬性及方法

const app = getApp(); Component({properties: {isIndex: { // 是否主頁 type: Boolean,value: false,},isInner: { //是否內部頁面type: Boolean,value: false,},},data: {// 這里是一些組件內部數(shù)據(jù)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"})}}} })

配置樣式wxss

.weibo-tabbar {bottom: 0;height: 97rpx;padding: 12rpx 0rpx;display: flex;width: 100%;position: fixed;background: #ffffff;box-sizing: border-box; } //產生優(yōu)雅的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; }

到此你只需要在你的頁面優(yōu)雅的添加一行，就能在你的頁面中產生tabbar

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

結果：

哇，看了半天就出這么一個小東西！
其實大道至簡
掌握這套方案能夠適配你需要的所有tabbar
他的顏色、大小、位置都可以自己掌控，重要的是這個解決方案。

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

按鈕的樣式層級z-index要提高

屬性值與{{}}傳輸?shù)陌盐?/li>

style="color:{{color}}; font-size:{{size}}" 注意里面的;號

覺得不錯的話可以點個贊鼓勵一下喲

總結

以上是生活随笔為你收集整理的小程序tabbar这套方案全搞定！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。