微信小程序自定义 tabbar 图标凸出效果

小程序自定义底部 tabbar 凸起

底部导航栏这个功能是非常常见的一个功能，基本上一个完成的 app，都会携带/存在一个导航栏，那么微信小程序的导航栏该怎么实现呢？

自定义 tabbar

新建 custom-tab-bar 文件夹，生成 page

index.js

// custom-tab-bar/index.js
Component({
    /**
     * 组件的初始数据
     */
    data: {
        selected: 0, // 当前选中的下标
        color: '#1e1e1e', // tabbar 未选中字体的颜色
        selectedColor: "", // tabbar 选中字体的颜色
        list: [ // tababr 循环数据集
            {
                "pagePath": "pages/TerminalInfo/Terminal",
                "iconPath": "/image/icon_API.png",
                "selectedIconPath": "/image/icon_API_HL.png",
                "text": "终端设备"
            },
            { // 扫码是我要凸出的tab
                "pagePath": "pages/ScanCodes/ScanCodes",
                "iconPath": "/image/icon_component.png",
                "selectedIconPath": "/image/icon_component_HL.png",
                "text": "终端扫码",
                "isSpecial": true
            },
            {
                "pagePath": "pages/UserCenter/UserCenter",
                "iconPath": "/image/132.jpg",
                "selectedIconPath": "/image/132.jpg",
                "text": "个人中心"
            }
        ]
    },
    attached() {},
    methods: {
        switchTab(e) {
            let data = e.currentTarget.dataset;
           /**
             * 跳转页面为例
             * let url = data.path;
             *  this.setData({
             *      selected: data.index
             *  })
             *  // 跳转到 tabbar 页，关闭其他所有非 tabbar 页
             *  wx.switchTab({ url });
             * 
             * 下面是不需要跳转页面为例
             */
            if (!data.click) {
                let url = data.path;
                this.setData({
                    selected: data.index
                })
                // 跳转到 tabbar 页，关闭其他所有非 tabbar 页
                wx.switchTab({ url });
            } else {
                // 扫码  凸起
                wx.scanCode({
                    onlyFromCamera: true,
                    success(res) {
                        console.log(res)
                    },
                    fail(err) {
                        console.log(err)
                        wx.showToast({
                            title: '扫码失败',
                            icon: 'loading',
                            duration: 1500
                        })
                    }
                })
            }
        }
    }
})

index.json

{
    "component": true,
    "usingComponents": {}
}

index.wxml

<view class="tab-bar">
    <view class="tab-bar-border"></view>
    <block wx:for="{{list}}" wx:key="index">
        <view wx:if="{{item.isSpecial}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial || false }}" data-index="{{index}}" bindtap="switchTab">
            <view class="special-image">
                <image class="special-image-pic" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
            </view>
            <view style="color: {{selected === index ? selectedColor : color}}" class="special-text tab-text">{{item.text}}</view>
        </view>
        <view wx:else class="tab-bar-item" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial }}" data-index="{{index}}" bindtap="switchTab">
            <image class="item-image" mode="aspectFit" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
            <view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
        </view>
    </block>
</view>

index.wxss

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96rpx;
    background: white;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2rpx;
    transform: scaleY(0.5);
}

.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tab-bar-item .item-image {
    width: 36rpx;
    height: 36rpx;
}

.tab-bar-item .special-image {
    position: absolute;
    top: -36rpx;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    border-top: 2rpx solid #f2f2f3;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 6rpx;
}

.tab-bar-item .special-image .special-image-pic {
    width: 100%;
    height: 100%;
}

.tab-bar-item .tab-text {
    margin-top: 4rpx;
    font-weight: 600;
}

.tab-bar-item .special-text {
    margin-top: 44rpx
}

.tab-bar-item .tab-text {
    font-size: 10px;
}

使用方法

app.json

tabbar: {
    "custom": true,
    "color": "#000",
    "selectedColor": "blue",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
        {
            "pagePath": "pages/TerminalInfo/Terminal",
            "iconPath": "/image/icon_API.png",
            "selectedIconPath": "/image/icon_API_HL.png",
            "text": "终端设备"
        },
        {
            "pagePath": "pages/ScanCodes/ScanCodes",
            "iconPath": "/image/icon_component.png",
            "selectedIconPath": "/image/icon_component.png",
            "text": "终端扫码"
        },
        {
            "pagePath": "pages/UserCenter/UserCenter",
            "iconPath": "/image/132.jpg",
            "selectedIconPath": "/image/132.jpg",
            "text": "个人中心"
        },
    ]
}

app.js

// 设置 tabbar 的选中，添加一个全局方法
getCurrentTabbar(selected, that) {
    console.log(selected, that);
    if (typeof that.getTabBar === 'function' && that.getTabBar()) {
        that.getTabBar().setData({
            selected: selected
        })
    }
}

调用方法

在使用的页面（组件）中，调用 app.getCurrentTabbar() 函数。

onShow() {
    app.getCurrentTabbar(1, this.route); 
}

注意：每个自定义下的 tabbar 页面都要调用一次，否则可能会出现第一次点击下标不跟随的 bug（问题）效果，下面是点击失败后的效果。

欢迎各位大佬来评论，并指出不足之处。