uni-app针对webview在h5及app端的界面高宽展示形势 - kcblog博客
黑猫 2022-01-25 01:12 434

在使用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博客,转载请注明出处

本网站提供的文章除原创外均转载自其他网站,本网站只为更好的记录及学习技术经验
若网站内转载的文章侵犯了您的版权,请通过 意见反馈 告知本网站,我们会尽快删除相关信息
Copyright©2021-2021 kcBlog博客 版权所有 粤ICP备2021119076号 v1.0.0 栈谷统计