底部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: '\ue510', 
            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);
}

💖为您推荐更多底部模版

底部导航栏中间按钮凸起

价格: ¥2.00
立即购买

依赖组件: 无依赖

模板分类:底部

文件类型: zip

包含内容: css,html,图片,js

更新日期: 2025-06-07 10:41

热度: 0°

开通vip会员,更划算!

  • ¥59/月付会员
  • ¥199/年付会员
  • ¥299/终身会员
立即开通VIP

友情链接