1***@qq.com
1***@qq.com
  • 发布:2023-06-10 20:28
  • 更新:2023-06-10 20:28
  • 阅读:662

webview解决隐藏title后状态栏遮挡和点击返回键回退页面的问题

分类:uni-app
// #ifdef APP-PLUS  
setWebView();  
// #endif  

let wv;  
function setWebView() {  
    const instance = getCurrentInstance().proxy.$scope;  
    const currentWebview = instance.$getAppWebview(); //获取当前web-view  
    setTimeout(function () {  
        wv = currentWebview.children()[0];  
        setWebViewHeight();  
        setWebViewBack();  
    }, 500);  
}  

function setWebViewHeight() {  
    const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;  
    const screenHeight = uni.getSystemInfoSync().screenHeight;  
    wv.setStyle({  
        top: statusBarHeight,  
        height: screenHeight - statusBarHeight  
    });  
}  

let canBack = false; // 判断是否还能继续回退  
// 设置webview的返回逻辑  
function setWebViewBack() {  
    wv.addEventListener('progressChanged', function (e) {  
        wv.canBack(function (e) {  
            canBack = e.canBack;  
        });  
    });  
}  

onBackPress((e) => {  
    // #ifdef APP-PLUS  
    if (canBack) {  
        wv.back(); // 返回上一页  
    } else {  
        plus.runtime.quit(); // 直接退出应用  
    }  
    return true;  
    // #endif  
});
0 关注 分享

要回复文章请先登录注册