微信小程序自定義不一樣的tabBar

近期做個微信小程序項目，因項目設計需要，所以要做成自定義的tabBar才能實現設計效果圖，具體效果如下圖：

其中掃碼買單，這個按鈕效果，微信自帶的tabBar是無法實現的，其后嘗試了下custom-tab-bar 也是無法實現。

沒辦法了，既然微信的tabBar無法實現。那就自己弄個真-自定義tabBar來實現好了。

各位看官莫慌，下面就把解決方案放上來。首先先來講下解決方案的思路，然后再把代碼送上。

思路：

　　微信的tabBar無法實現，那么就放棄微信的tabBar，改用Component 來實現。把微信自帶的tabBar隱藏起來，用Component 做成偽tabBar並應該到頁面上。

　　1、把app.json下的 tabBar 給干掉。這樣在首頁就不會有tabBar顯示了。

　　2、寫Component 偽tabBar並應該到頁面上。

具體操作（代碼）如下：

　　app.json刪除 tabBar

　　寫Component 偽tabBar

 

// Componet/tabBar/tabBar.js
Component({
    /**
     * 組件的屬性列表
     */
    properties: {
        idx: {
            type: Number,
            value: 0
        },
    },
    /**
     * 組件的初始數據
     */
    data: {
        tabBar: [{
                "pagePath": "../../pages/index/index",
                "text": "首頁",
                "switchQr": false,
                "iconPath": "/image/home.svg",
                "selectedIconPath": "/image/home_sel.svg",
            },
            {
                "pagePath": "",
                "text": "掃碼買單",
                "switchQr": true,
                "iconPath": "/image/saoma.svg",
            },
            {
                "pagePath": "../../pages/user/user",
                "text": "我的",
                "switchQr": false,
                "iconPath": "/image/mine.svg",
                "selectedIconPath": "/image/mine_sel.svg",
            },
        ]
    },
    /**
     * 組件的方法列表
     */
    methods: {
        goToTab: function (e) {
            //如果點擊當前頁面則不進行跳轉
            if (this.data.idx == e.currentTarget.dataset.index) {
                return false
            }
            wx.navigateTo({
                url: e.currentTarget.dataset.url
            })
        },
        // 掃碼
        switchQr() {
            // console.log('掃碼')
            
        },
        
    }
})

 

 

<!--Componet/tabBar/tabBar.wxml-->
<view class="tabBar">
    <view class="cont">
        <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
            <view class="item {{item.switchQr?'switchQr':''}}" catchtap="{{!item.switchQr?'goToTab':'switchQr'}}" data-url="{{item.pagePath}}" data-index="{{index}}">
                <image class="ico" src="{{idx === index ? item.selectedIconPath : item.iconPath}}"></image>
                <view class="txt {{idx === index ? 'selectedColor' : ''}}">{{item.text}}
                </view>
            </view>
        </block>
    </view>
</view>

 

/* Componet/tabBar/tabBar.wxss */

.tabBar {
    width: 100%;
    position: fixed;
    bottom: 0;
    font-size: 20rpx;
    color: #8A8A8A;
    background: #fff;
    /* border-top: 2rpx solid #eee; */
    box-shadow: 0rpx 1rpx 6rpx rgba(0,0,0,0.3);
}

.cont {
    margin-top: 10rpx;
    padding: 0;
    z-index: 0;
    height: calc(100rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    display: flex;
}

.cont .item {
    font-size: 24rpx;
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0;
    display: block;
    height: auto;
    line-height: 1;
    margin: 0;
    background-color: inherit;
    overflow: initial;
    justify-content: center;
    align-items: center;
}

.cont .item .ico {
    width: 46rpx;
    height: 46rpx;
    margin: auto
}

.cont .item .txt{
    margin-top: 8rpx;
    color: #333;
}

.cont .switchQr .ico {
    position: absolute;
    width: 106rpx !important;
    z-index: 2;
    height: 106rpx !important;
    border-radius: 50%;
    font-size: 50rpx;
    top: -50rpx;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;

}
.cont .switchQr .txt{
    margin-top: 56rpx;
}

.cont .item .selectedColor{
    color: #ff4e4e;
}

 

在index/user的頁面上應用。

1、要在index.json/user.json文件引用Componet

"usingComponents": {
    "tabBar":"/Componet/tabBar/tabBar"
  },

2、在頁面的引用Componet

<!-- index.wxml -->
<tabBar idx="0"></tabBar>

<!--user.wxml -->
<tabBar idx="2"></tabBar>