【uniapp】解决H5嵌套在web-view中时打包页面与状态栏重叠

问题:

当H5嵌套在web-view中,打包后的app打开后的页面的导航栏与手机状态栏重叠

根据官方文档:App端web-view的扩展

解决方案:

html 复制代码
<template>
  <view>
    <web-view ref="webview" :src="path" @message="message" />
  </view>
</template>
javascript 复制代码
 onLoad(e) {
    const dateTime = new Date()
    this.path = `https://xxxx.com/?t=${dateTime.getTime()}#/`
    this.$nextTick(() => {
      currentWebview = this.$scope.$getAppWebview()
      setTimeout(function() {
        var wv = currentWebview.children()[0]
        wv.setStyle({// 设置web-view距离顶部的距离以及自己的高度,单位为px
          top: 42 // 距离顶部的高度
          bottom:0,//防止输入框被软键盘遮挡、防止底部tabbar被遮挡
          // height:height,//webview的高度
        })
      }, 1000) // 如果是首页的onload调用时需要延时一下,二级页面无需延时,可直接获取
    })
  },
相关推荐
wuxianda103010 小时前
苹果App上架4.3a被拒解决方案汇报总结
ios·uni-app·objective-c·cocoa·苹果上架·4.3a
Championship.23.2410 小时前
Open Source Pipeline Skill深度解析:自动化开源贡献全流程
前端·javascript·html
Bigger10 小时前
🧠 前端岗位的"结构性调整":现象背后的冷思考
前端·程序员·ai编程
薯老板10 小时前
vue组件之间的通信
前端·vue.js
迪菲赫尔曼10 小时前
从 0 到 1 打造工业级推理控制台:UltraConsole(Ultralytics + FastAPI + React)开源啦!
前端·yolo·react.js·计算机视觉·开源·fastapi
万邦科技Lafite10 小时前
京东开放API接口:item_get返回参数指南
java·前端·javascript·api·电商开放平台
梦想CAD控件10 小时前
网页CAD协同设计平台-生产级在线实时协同CAD引擎
前端·javascript·架构
Highcharts.js10 小时前
React 开发实战:如何使用 useEffect 为 Highcharts 注入实时数据
前端·javascript·react.js·开发实战·实时数据·highcharts·轮询数据
陆枫Larry10 小时前
Vue Slot 到底在解决什么问题?
前端
梦想很大很大11 小时前
让 AI 成为“报表配置员”:BI 低代码平台的 Schema 实践路径
前端·人工智能·低代码