子窗口中嵌入web组件,web页面输入框拉起键盘后,web组件画面截断了

咨询场景描述:

1. 通过子窗口的方式实现弹窗,弹窗中嵌入了web页面。

2. web页面中有TextInput输入框,点击输入框,拉起键盘。

3. 子窗口整体上移,但是web页面头部被截断了。

HarmonyOS
2024-02-20 09:54:34
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Nicrosoft

监听软键盘弹出和收起,当软键盘弹出子窗口高度设置为屏幕高度-软键盘高度;软键盘收起,弹出子窗口高度为屏幕高度。

代码示例

// 子窗口页面布局 
import webview from '@ohos.web.webview'; 
import window from '@ohos.window'; 
 
@Entry 
@Component 
export struct SubWindowPage { 
  @State webViewVisibility: Visibility = Visibility.Visible; 
  private pageWidth = 320; 
  private pageHeight = 500; 
  private controller: webview.WebviewController = new webview.WebviewController(); 
  @State flexAlign: FlexAlign = FlexAlign.Center 
  @State screenHeight: number | string = '100%' 
 
  aboutToAppear() { 
    window.getLastWindow(getContext(this)).then(currentWindow => { 
      // 监视软键盘的弹出和收起 
      currentWindow.on('avoidAreaChange', async data => { 
        let property = currentWindow.getWindowProperties(); 
        let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD); 
        this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height); 
      }); 
    }) 
  } 
  build() { 
    Stack() { 
      Column() { 
        Web({ src: $rawfile('index.html'), controller: this.controller }) 
          .javaScriptAccess(true) 
          .fileAccess(false) 
          .zoomAccess(false) 
          .domStorageAccess(true) 
          .onlineImageAccess(true) 
          .horizontalScrollBarAccess(false) 
          .verticalScrollBarAccess(false) 
          .cacheMode(CacheMode.Online) 
          .width(this.pageWidth) 
          .height(this.pageHeight) 
          .border({ radius: 6 }) 
          .visibility(this.webViewVisibility) 
          .backgroundColor(Color.Pink) 
      } 
      .justifyContent(this.flexAlign) 
      .alignItems(HorizontalAlign.Center) 
      .width('100%') 
      .height('100%') 
    } 
    .width('100%') 
    .height(this.screenHeight) 
    .backgroundColor('#999955') 
    .alignContent(Alignment.Center) 
  } 
}
分享
微博
QQ
微信
回复
2024-02-20 19:39:53
相关问题
Web组件的onKeyEvent键盘事件不生效
781浏览 • 1回复 待解决
Web组件拦截页面请求响应
492浏览 • 1回复 待解决
可以脱离页面创建web组件,指的是?
384浏览 • 1回复 待解决
web组件registerJavaScriptProxy的问题
663浏览 • 0回复 待解决
web组件之cookie的使用
549浏览 • 1回复 待解决
Web组件如何开启手势缩放
663浏览 • 1回复 待解决
Web组件domStorageAccess属性设置
1150浏览 • 1回复 待解决
web组件对html文件的加载
441浏览 • 1回复 待解决
JS API 中 web组件 怎么使用
4050浏览 • 1回复 待解决
如何通过web组件预览PDF
218浏览 • 1回复 待解决
如何判断Web组件是否全屏
874浏览 • 1回复 待解决