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

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



 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • WebView·开车指南 2016-08-31BugDev 北京市东城区首席Bug布道师开山之作,一整月交通事故血...
    53c021c38a1d阅读 852评论 0 1
  • Tips 由于WebView的用法实在太多,如果您只是想查询某个功能的使用——建议Ctrl+F(Commad+F)...
    BugDev阅读 7,807评论 11 109
  • 不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪。近期正好在做小程序的项目,便研究了一...
    神木惊蛰阅读 14,354评论 1 3
  • WebView常用方法 String getUrl():获取当前页面的URL。 reload():重新reload...
    JuSong阅读 3,362评论 0 3
  • 链接:https://www.jianshu.com/p/fd61e8f4049e 一、简介 这部分主要介绍下 W...
    柒黍阅读 1,888评论 0 4