平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

底部tan凸起按钮

不需要引入组件,使用简单

使用方式

pages.json 配置底部tab栏

"tabBar" : {
    "color" : "#7a7e83",
    "selectedColor" : "#FFD305",
    "backgroundColor" : "#ffffff",
    "borderStyle" : "block",
    "list" : [
        {
            "pagePath" : "pages/index/index_0",
            "text" : "首页",
            "iconPath" : "static/tab_icon_2.png",
            "selectedIconPath" : "static/tab_icon_1.png"
        },
        {
            "pagePath" : "pages/index/index_1",
            "text" : "发现",
            "iconPath" : "static/tab_icon_4.png",
            "selectedIconPath" : "static/tab_icon_3.png"
        },
        {
            "pagePath" : "pages/index/index_2",
            "text" : "发布",
            "iconPath" : "static/tab_icon_5_5.png",
            "selectedIconPath" : "static/tab_icon_5_5.png.png"
        },
        {
            "pagePath" : "pages/index/index_3",
            "text" : "消息",
            "iconPath" : "static/tab_icon_7.png",
            "selectedIconPath" : "static/tab_icon_6.png"
        },
        {
            "pagePath" : "pages/index/index_4",
            "text" : "我的",
            "iconPath" : "static/tab_icon_9.png",
            "selectedIconPath" : "static/tab_icon_8.png"
        }
    ]
}

首页 new plus.nativeObj.Bitmap

onLoad() {
    bitmap = new plus.nativeObj.Bitmap('bmp1');
    //bitmap.load('static/tab_icon_5.png', function() {}, function(e) {});  普通写法
    //兼容ios端需要执行下面的代码
    bitmap.loadBase64Data('base64图片地址', function() {}, function(e) {});
    this.createtab();
}

设置凸起按钮样式位置

methods: {
    createtab: function(){
        // 设置水平居中位置
        var leftPos = Math.ceil((plus.screen.resolutionWidth - 60) / 2);
        var view = new plus.nativeObj.View('icon', {
            bottom: '19px',
            left: leftPos + 'px',
            width: '60px',
            height: '60px'
        });
        view.drawBitmap(bitmap, {
            tag: 'font',
            id: 'icon',
            //text: '', 
            src: '/static/tab_icon_5.png',
            position: {
                top: '0px',
                left: '5px',
                width: '50px',
                height: '100%'
            }
        });
        view.addEventListener("click", function(e) {
            uni.switchTab({
                url: '/pages/index/index_2'
            })
        }, false);
        view.show();
    }
}

显示按钮

onShow() {
    var icon = plus.nativeObj.View.getViewById("icon");
    if (icon) {
        setTimeout(function(){
            icon.show();
        },100)
    }
}

子页面隐藏按钮

onShow() {
    /* 隐藏凸起图标 */
    var icon = plus.nativeObj.View.getViewById("icon");
    setTimeout(function() {
        icon.hide();
    }, 100);
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问