uniapp底部突起按钮

效果演示：

实现方法

在pages.json文件中，tabBar部分设置

"tabBar": {
        "color": "#aaaaaa",
        "selectedColor": "#666666",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/tab-bar/home.png",
            "selectedIconPath": "/static/tab-bar/home@action.png",
            "text": "首页"
        }, {
            "pagePath": "pages/user/index",
            "iconPath": "static/tab-bar/me.png",
            "selectedIconPath": "static/tab-bar/me@action.png",
            "text": "我的"
        }],
        "midButton": {
            "width": "80px",
            "height": "80px",
            // "text": "扫一扫",
            "iconPath": "static/tab-bar/scan.png",
            "iconWidth": "80px"
            // "backgroundImage": "static/tab-bar/scan@backgroundImage.png"
        }
    },

响应方法

只能通过uni.onTabBarMidButtonTap来相应tab事件。

        scanBtn() {
            let that = this;
            uni.onTabBarMidButtonTap(function() {
                that.$message.tips('调用扫码')
                // #ifdef APP-PLUS
                uni.scanCode({
                    // onlyFromCamera: true,
                    success: function(res) {
                        console.log('条码类型：' + res.scanType);
                        console.log('条码内容：' + res.result);
                        that.$message.tips('扫码结果：' + res.result)
                    }
                });
                // #endif
            })
        }

下载地址：

midButton模板.zip