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

摘要： 關於微信小程式的tarbar，相信你們都不會陌生 在實現小程式微信原裝的tabbar卻比較呆板，不夠精緻，往往不符合自己的要求 這個時候怎麼辦呢 這套方案接著！ 先簡單的來說一下主要思想: 自定義字型圖示元件以及tabbar元件，在tabbar中引用自定...

關於微信小程式的tarbar，相信你們都不會陌生 在實現小程式微信原裝的tabbar卻比較呆板，不夠精緻，往往不符合自己的要求

• 這個時候怎麼辦呢

  這套方案接著！

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

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

實現這套方案核心還是自定義元件

那就從這開始聊：

一個自定義元件由 json wxml wxss js 4個檔案組成。

• 一個頁面要引用一個元件時只需要在該頁面的json配置下新增如下

{
//宣告引用一個元件 配置好你的元件引用路徑
"usingComponents": {
"icon": "../../components/icon/index"
}
}
複製程式碼

• 然後再頁面上新增元件的標籤即可。

//這樣就能夠在你的頁面中新增元件
<icon type="" color="" size=""/>
複製程式碼

如果對於元件的定義仍有疑惑的可以參考這份文件： ofollow,noindex">官方關於自定義元件的文件

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>
複製程式碼

結果：

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

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