ilijiayin
ilijiayin
  • 发布:2019-05-27 13:29
  • 更新:2019-05-27 17:58
  • 阅读:2503

【报Bug】安卓全面屏手机naigationbar高度获取不到

分类:uni-app

安卓手机全面屏手机怎么适配naigationbar高度,比如小米8可以设置全面屏和经典导航栏,如何来判断手机此时是全面屏还是经典导航,这个naigationbar高度怎么来获取呢?
用插件市场里面的#底部图标菜单 imagemenu#为例,现在非全面屏手机是没有问题的,如果是全面屏手机获取不到naigationbar高度,导致click事件,点击区域有一个naigationbar高度的误差。


<template>  
    <view>  
        <view class="fab-box fab rightBottom">  
            <view class="fab-circle bottom"  
             :style="{ 'background-color': styles.buttonColor }" @tap="_onClick">  
                <text class="uni-icon uni-icon-plusempty" :class="{ active: isShow }"></text>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    // #ifdef APP-PLUS  
    // 如下为分享内容定义,可根据业务需求自行定义  
    var strShareUrl = "https://uniapp.dcloud.io"  
    var strShareTitle = "跨端神器uni-app,开发一次,App、小程序、H5全覆盖"  
    var strShareSummary = "iOS、Android、H5、微信/支付宝/百度小程序,一套代码全覆盖"  
    var strShareImageUrl = "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"  

    //以下为计算菜单的nview绘制布局,为固定算法,使用者无关关心  
    var screenWidth = plus.screen.resolutionWidth  
    //以360px宽度屏幕为例,上下左右边距及2排按钮边距留25像素,图标宽度55像素,同行图标间的间距在360宽的屏幕是30px,但需要动态计算,以此原则计算4列图标分别的left位置  
    //图标下的按钮文字距离图标5像素,文字大小12像素  
    //底部取消按钮高度固定为44px  
    //TODO 未处理横屏和pad,这些情况6个图标应该一排即可  
    var margin = 25,  
        iconWidth = 55,  
        icontextSpace = 5,  
        textHeight = 12  
    var left1 = margin / 360 * screenWidth  
    var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距,再减去4个图标的宽度,就是3个同行图标的间距  
    if (iconSpace <= 5) { //屏幕过窄时,缩小边距和图标大小,再算一次  
        margin = 15  
        iconWidth = 40  
        left1 = margin / 360 * screenWidth  
        iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距,再减去4个图标的宽度,就是3个同行图标的间距  
    }  
    var left2 = left1 + iconWidth + iconSpace  
    var left3 = left1 + (iconWidth + iconSpace) * 2  
    var left4 = left1 + (iconWidth + iconSpace) * 3  
    var top1 = left1  
    var top2 = top1 + iconWidth + icontextSpace + textHeight + left1  
//  console.log("screenWidth: " + screenWidth + " ;height: " + plus.screen.resolutionHeight);  
//  console.log("left1: " + left1);  
//  console.log("iconSpace: " + iconSpace);  
    var nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层  
        top: '0px',  
        left: '0px',  
        height: '100%',  
        width: '100%',  
        backgroundColor: 'rgba(0,0,0,0.2)'  
    });  
    nvMask.addEventListener("click", function() { //处理遮罩层点击  
        nvMask.hide();  
        nvImageMenu.hide();  
    })  
    var nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单  
        bottom: '0px',  
        left: '0px',  
        height: '264px',  
        width: '100%',  
        backgroundColor: 'rgb(255,255,255)'  
    });  
    //绘制底部图标菜单的内容  
    nvImageMenu.draw([  
        {  
            tag: 'rect',//菜单顶部的分割灰线  
            color: '#e7e7e7',  
            position: {  
                top: '0px',  
                height: '1px'  
            }  
        },  
        {  
            tag: 'font',  
            id: 'sharecancel',//底部取消按钮的文字  
            text: '取消分享',  
            textStyles: {  
                size: '14px'  
            },  
            position: {  
                bottom: '0px',  
                height: '44px'  
            }  
        },  
        {  
            tag: 'rect',//底部取消按钮的顶部边线  
            color: '#e7e7e7',  
            position: {  
                bottom: '45px',  
                height: '1px'  
            }  
        },  
        {  
            tag: 'img',  
            id: 'imgwechatfriend',  
            src: '/static/sharemenu/wechatfriend.png',  
            position: {  
                top: top1,  
                left: left1,  
                width: iconWidth,  
                height: iconWidth  
            }  
        },  
        {  
            tag: 'font',  
            id: 'fontwechatfriend',  
            text: '微信好友',  
            textStyles: {  
                size: textHeight  
            },  
            position: {  
                top: top1 + iconWidth + icontextSpace,  
                left: left1,  
                width: iconWidth,  
                height: textHeight  
            }  
        },  
        {  
            tag: 'img',  
            id: 'imgwechatmoments',  
            src: '/static/sharemenu/wechatmoments.png',  
            position: {  
                top: top1,  
                left: left2,  
                width: iconWidth,  
                height: iconWidth  
            }  
        },  
        {  
            tag: 'font',  
            id: 'fontwechatmoments',  
            text: '微信朋友圈',  
            textStyles: {  
                size: textHeight  
            },  
            position: {  
                top: top1 + iconWidth + icontextSpace,  
                left: left2 - 2.5,  
                width: iconWidth + 5,  
                height: textHeight  
            }  
        },  
        {  
            tag: 'img',  
            id: 'imgweibo',  
            src: '/static/sharemenu/weibo.png',  
            position: {  
                top: top1,  
                left: left3,  
                width: iconWidth,  
                height: iconWidth  
            }  
        },  
        {  
            tag: 'font',  
            id: 'fontweibo',  
            text: '微博',  
            textStyles: {  
                size: textHeight  
            },  
            position: {  
                top: top1 + iconWidth + icontextSpace,  
                left: left3,  
                width: iconWidth,  
                height: textHeight  
            }  
        },  
        {  
            tag: 'img',  
            id: 'imgqq',  
            src: '/static/sharemenu/qq.png',  
            position: {  
                top: top1,  
                left: left4,  
                width: iconWidth,  
                height: iconWidth  
            }  
        },  
        {  
            tag: 'font',  
            id: 'fontqq',  
            text: 'QQ',  
            textStyles: {  
                size: textHeight  
            },  
            position: {  
                top: top1 + iconWidth + icontextSpace,  
                left: left4,  
                width: iconWidth,  
                height: textHeight  
            }  
        },  
        {  
            tag: 'img',  
            id: 'imgcopyurl',  
            src: '/static/sharemenu/copyurl.png',  
            position: {  
                top: top2,  
                left: left1,  
                width: iconWidth,  
                height: iconWidth  
            }  
        },  
        {  
            tag: 'font',  
            id: 'fontcopyurl',  
            text: '复制',  
            textStyles: {  
                size: textHeight  
            },  
            position: {  
                top: top2 + iconWidth + icontextSpace,  
                left: left1,  
                width: iconWidth,  
                height: textHeight  
            }  
        },  
        {  
            tag: 'img',  
            id: 'imgmore',  
            src: '/static/sharemenu/more.png',  
            position: {  
                top: top2,  
                left: left2,  
                width: iconWidth,  
                height: iconWidth  
            }  
        },  
        {  
            tag: 'font',  
            id: 'fontmore',  
            text: '更多',  
            textStyles: {  
                size: textHeight  
            },  
            position: {  
                top: top2 + iconWidth + icontextSpace,  
                left: left2,  
                width: iconWidth,  
                height: textHeight  
            }  
        },  
        //如果想要增加更多按钮,请在这里继续添加,第二列还有2个空位  
    ])  
    nvImageMenu.addEventListener("click", function(e) { //处理底部图标菜单的点击事件,根据点击位置触发不同的逻辑  
        // console.log("click menu"+JSON.stringify(e));  
        if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮  
            nvMask.hide();  
            nvImageMenu.hide();  
        } else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {  
            //屏幕左右边缘5像素及菜单顶部5像素不处理点击  
        } else { //点击了图标按钮  
            var iClickIndex = -1 //点击的图标按钮序号,第一个图标按钮的index为0  
            var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1  
            var iCol = -1  
            if (e.clientX < (left2 - (iconSpace / 2))) {  
                iCol = 0  
            } else if (e.clientX < (left3 - (iconSpace / 2))) {  
                iCol = 1  
            } else if (e.clientX < (left4 - (iconSpace / 2))) {  
                iCol = 2  
            } else {  
                iCol = 3  
            }  
            if (iRow == 0) {  
                iClickIndex = iCol  
            } else {  
                iClickIndex = iCol + 4  
            }  
            console.log("点击按钮的序号: " + iClickIndex);  
            if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑,此处也可以自行定义逻辑。如果增减了按钮,此处也需要跟着修改  
                var strProvider="",strScene=""  
                switch (iClickIndex) {  
                    case 0:  
                        strProvider = "weixin"  
                        strScene = "WXSceneSession"  
                        break;  
                    case 1:  
                        strProvider = "weixin"  
                        strScene = "WXSenceTimeline"  
                        break;  
                    case 2:  
                        strProvider = "sinaweibo"  
                        break;  
                    case 3:  
                        strProvider = "qq"  
                        break;  
                    case 4:  
                        uni.setClipboardData({  
                            data: strShareUrl,  
                            complete() {  
                                uni.showToast({  
                                    title: "已复制到剪贴板"  
                                })  
                            }  
                        })  
                        break;  
                    case 5:  
                        plus.share.sendWithSystem({  
                            content: strShareUrl,  
                        })  
                        break;  
                }  
                if (strProvider!="") { //点击了0-3序号的这4个按钮  
                    uni.share({  
                        provider: strProvider,  
                        scene:strScene,  
                        type: 0,  
                        href: strShareUrl,  
                        title: strShareTitle,  
                        summary: strShareSummary,  
                        imageUrl: strShareImageUrl,  
                        success: function(res) {  
                            console.log("success:" + JSON.stringify(res));  
                        },  
                        fail: function(err) {  
                            console.log("fail:" + JSON.stringify(err));  
                        }  
                    })  
                }  
            }  
        }  
    })  
    /* nvImageMenu.addEventListener("touchstart", function(e) {  
        if (e.screenY > (plus.screen.resolutionHeight - 44)) {  
            //TODO 这里可以处理按下背景变灰的效果  
        }  
    })  
    nvImageMenu.addEventListener("touchmove", function(e) {  
        //TODO 这里可以处理按下背景变灰的效果  
        if (e.screenY > plus.screen.resolutionHeight - 44) {}  
    })  
    nvImageMenu.addEventListener("touchend", function(e) {  
        //TODO 这里可以处理释放背景恢复的效果  
    })  
    */  
    // #endif  

    export default {  
        data() {  
            return {  
                fabShow: false,  
                flug: true,  
                isShow: false,  
                styles: {  
                    color: '#007aff',  
                    selectedColor: '#007AFF',  
                    backgroundColor: '#fff',  
                    buttonColor: '#007aff'  
                }  
            };  
        },  
        created() {  
            this.styles = Object.assign({}, this.styles, this.pattern);  

        },  
        methods: {  
            _onClick() {  
                this.isShow = !this.isShow;  
                //TODO 未处理h5,h5应调用qq浏览器等自带的share api,如果浏览器不自带share,那么分享图标不应该显示。或者从简的话,h5整个就不显示分享按钮  
                // #ifdef APP-PLUS  
                setTimeout(function(){  
                    nvMask.show()  
                    nvImageMenu.show() //5+应支持从底部向上弹出的动画  
                }, 100);  

                // #endif  
            }  
        }  
    };  
</script>  

<style scoped>  
    .fab-box {  
        position: fixed;  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        z-index: 2;  
    }  

    .fab-box.active {  
        opacity: 1;  
    }  

    .fab-box.fab {  
        z-index: 10;  
    }  

    .fab-box.fab.rightBottom {  
        right: 80upx;  
        bottom: 20upx;  
        /* #ifdef H5 */  
        bottom: 110upx;  
        /* #endif */  
    }  

    .fab-circle {  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        position: absolute;  
        width: 110upx;  
        height: 110upx;  
        background: #3c3e49;  
        border-radius: 50%;  
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);  
        z-index: 11;  
    }  

    .fab-circle.bottom {  
        bottom: 0;  
    }  

    .fab-circle .uni-icon-plusempty {  
        color: #ffffff;  
        font-size: 80upx;  
        transition: all 0.3s;  
        font-weight: bold;  
    }  

    .fab-circle .uni-icon-plusempty.active {  
        transform: rotate(135deg);  
    }  
</style>  

</script>
2019-05-27 13:29 负责人:无 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

可以使用5+ API获取状态栏高度:http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight

  • ilijiayin (作者)

    状态栏高度获取了,还是相差一个navigationBar高度,如何判断是否开启了全面屏手势,开启全面屏手势之后,如何获取navigationBar高度

    2019-05-27 14:32

  • ilijiayin (作者)

    安卓如何判断是否开启了全面屏手势

    2019-05-27 15:21

DCloud_Android_ST

DCloud_Android_ST

问题已确认会尽快修复

  • ilijiayin (作者)

    1.9.11.20190528-alpha版修复的:Android平台 修复 部分设备上开启全面屏手势的情况下获取屏幕高度(plus.screen.resolutionHeight)不正确的Bug ,这个还缺少一个是否开启了全面屏手势的状态,开启了才加上navigationBar高度,不开启应该不加navigationBar高度才对,要不然还是不正确的

    2019-05-29 15:30

  • DCloud_Android_ST

    你提供的示例可以正常运行了。如果还有问题请提供新的示例

    2019-05-29 16:33

该问题目前已经被锁定, 无法添加新回复