微信小程序自定义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

1 "usingComponents": {
2     "tabBar":"/Componet/tabBar/tabBar"
3   },

2、在页面的引用Componet

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

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