美文网首页
uni-app 使用web-view 全屏 顶部状态栏遮挡

uni-app 使用web-view 全屏 顶部状态栏遮挡

作者: Yyyyyyyyyujie | 来源:发表于2019-12-04 16:51 被阅读0次

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面。

我的功能是  扫描二维码打开二维码的页面

但是web-view铺满全屏  1.状态栏遮挡页面  2.没有区别app和h5页面

所以  打算加一个顶部导航 

一、新建一个页面  叫做web_view.vue  然后再考虑把web-view放到当前这个页面  页面接参数url 这样可以打开所有要用web-view打开的网址

        参数路径传递的问题  

        路径要传递的话  如果路径带参数  传递可能会丢失参数

        一种是可以把参数拆分一下 拼接  但是我觉得很麻烦 而且参数不固定所以没用

        第二种就是url编码    encodeURIComponent(URIstring)   拿到之后解码 decodeURIComponent(URIstring)

二、就是放入web-view组件  

        这就遇到了web-view铺满的问题  如果直接在页面中直接写入web-view组件放入url  那就铺满了

        想放个标题或者是不想让状态栏遮挡的话怎么办呢?

        一种:引用了web-view组件之后  进行修改 

                // #ifdef APP-PLUS

                     var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象 

                     setTimeout(function() {

                         wv   = currentWebview.children()[0] 

                         wv.setStyle({top:150,height:300}) 

                     }, 1000); //如果是页面初始化调用时,需要延时一下 // #endif

        一种:直接用js创建web-view组件

    // #ifdef APP-PLUS

        var w=plus.webview.create(url,'id',{

                top:uni.getSystemInfoSync().statusBarHeight+50,

                  //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值

                  //因为设置top之后 webview的高度依然不变会往下移 底部会被遮住  所以设置一下高度

                height:uni.getSystemInfoSync().windowHeight - 44 -uni.getSystemInfoSync().statusBarHeight

        },{preload:'preload webview'}); // 可直接通过以下方法获取preload值

      var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象

      currentWebview.append(w);//一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭

  // #endif

 

相关文章

  • uni-app 使用web-view 全屏 顶部状态栏遮挡

    web-view是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面。 我的功能是 扫描二维码打...

  • 沉浸式页面效果

    设置状态栏背景透明 设置状态栏字体颜色 设置DecorView全屏 针对Toolbar(系统或者自定义),留出顶部...

  • android沉浸式全屏显示

    客户需求: 首页要全屏显示, 顶部的状态栏要显示在首页的背景图片上直接上代码: 主题中设置状态栏透明