在使用uni-app的过程中,经常性会遇到要引入外部链接到自己uni-app项目中打开,这时需要用到webview组件,而webview在h5端和app端是有着不同的展示层级的。在app端,webview展示层级是大于page展示层级,那么势必会遮挡page里面的自定义的header头部导航栏及底部按钮栏目,因为此时的webview会充斥真个手机端屏幕。h5端的与app端不同,h5端的webview可以通过页面标签view去控制他的可视范围,说白了此时的webview跟平常的页面标签是一样的,可以直接通过css去控制大小。
兼容两端webview展示的方式如下:
<template>
<view>
<view class="ContentPage">
<!-- #ifdef H5 -->
<view :style="'height:'+h5WebviewHeight+'px'" style="position: relative;">
<web-view :src="PDFUrl" style="width: 100%;"></web-view>
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<web-view :src="PDFUrl"></web-view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default{
data(){
return {
PDFUrl:'http://www.baidu.com/',
h5WebviewHeight:0
}
},
onLoad(){
//调用方法
this.setWebViewHeight();
},
methods:{
setWebViewHeight(){
let _this=this
const query=uni.createSelectorQuery().in(_this);
//获取设备信息,主要是获取屏幕的可视高宽
uni.getSystemInfo({
success:(res)=>{
//这里的查询.ContentPage主要是为了拿到此元素距离顶部的距离有多少
query.select('.ContentPage').boundingClientRect(data => {
// #ifdef H5
//当前屏幕可视高度 - ContentPage的距离顶部的距离,剩下就是webview的高度啦
_this.h5WebviewHeight = res.screenHeight - data.top;
// #endif
// #ifdef APP-PLUS
//获取页面的webview
var currentWebview = _this.$scope.$getAppWebview();
setTimeout(() => {
var wv = currentWebview.children()[0];
wv.setStyle({
top: data.top, //ContentPage距离顶部的距离
height: res.screenHeight - data.top //去掉ContentPage距离顶部的距离后剩下的高度
})
}, 1000);
// #endif
})
}
})
}
}
}
</script>
若是底部一样有按钮,且不想被webview遮挡,一样按照ContentPage获取到标签的高度最后减掉数值就可以了。
文章出自kcBlog博客,转载请注明出处