【每日学点 HarmonyOS Next 知识】上下拉刷新、scroll 嵌套 web、this 指向、路由方案、输入法遮挡

2025-03-13
北京
本文字数：2142 字
阅读完需：约 7 分钟

1、HarmonyOS 有没有上拉加载更多控件，或者是 Refresh 组件是否支持自动触底加载更多功能？

关于上拉加载可以参考文档，里面有相关 demo：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5#ZH-CN_TOPIC_0000001884756518__%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E4%B8%8E%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD页面的下拉刷新与上拉加载功能在移动应用中十分常见，例如，新闻页面的内容刷新和加载。这两种操作的原理都是通过响应用户的触摸事件，在顶部或者底部显示一个刷新或加载视图，完成后再将此视图隐藏。

以下拉刷新为例，其实现主要分成三步：

监听手指按下事件，记录其初始位置的值。
监听手指按压移动事件，记录并计算当前移动的位置与初始值的差值，大于 0 表示向下移动，同时设置一个允许移动的最大值。
监听手指抬起事件，若此时移动达到最大值，则触发数据加载并显示刷新视图，加载完成后将此视图隐藏。

2、HarmonyOS scroll 嵌套多个 web，显示问题？

使用 Scroll 组件嵌套两个或以上 Web 组件来展示内容并实现滚动， Web 组件无法自适应高度。如果不设置 Web 组件的高度 height，不显示内容；如果使用 Web().layoutMode(WebLayoutMode.FIT_CONTENT) ，不显示内容；如果使用 Web().height(‘100%’)，Web().height(‘80%’)这些可以显示内容，但是内容少时显示太高，内容多时显示不全。如何设置 Web 组件可以自适应高度？

关于 web 的嵌套滚动，参考下以下文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-nested-scrolling-V5layoutMode设置 Web 布局模式可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11

3、HarmonyOS Builder 函数作为一个控件的入参，Builder 函数的 click this 没有指向原始的 this？

页面 Page，里面有一个控件 View，从 Page 给 View 传递了一个构建的 Builder 函数，但该函数的 onClick this 没有指向 Page。(导致 title 不更新)

参考 demo：

@Componentstruct CustomContainer {  @Prop header: string = '';  @Builder defaultBulder(){}
  @BuilderParam rightBuilder: () => void = this.defaultBulder  build() {    Column() {
      this.rightBuilder()    }  }}@Entry@Componentstruct CustomContainerUser {  @State text: string = 'header';
  build() {    Column() {      Text(this.text)      CustomContainer({ header: this.text }) {        Column() {          this.rightBuilder('testA', 'testB')        }.backgroundColor(Color.Yellow)        .onClick(() => {          this.text = 'changeHeader';        })      }    }
  }  @Builder  rightBuilder(label1: string, label2: string) {    Column() {      Button('右边按钮').onClick(() => {        this.text = '点击了'        console.log('qqqq1=',this)      })      //   }    }  }}

复制代码

4、HarmonyOS NavDestination 路由方案和全模态页面冲突？

在使用 Navigation-NavDestination 的路由方案的情况下，页面内部使用了 bindContentCover 弹出模态页面，会有生命周期不兼容的问题。

全模态弹出会触发所在页面的 NavDestination.onHidden，而如果不接入 NavDestination 弹出模态则不会触发页面的 onPageHide 生命周期回调。

bindContentCover 是构建全屏模态转场效果，所以会触发 onHidden。可以参考以下 NavDestination 文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5

5、HarmonyOS 输入法弹出后遮挡界面按钮怎么处理？

登录页弹出输入面板后，遮挡了登录按钮

参考以下 demo：

import window from '@ohos.window';
@Entry@Componentstruct Index {  @State screenHeight: number = 0;
  aboutToAppear() {    window.getLastWindow(getContext(this)).then(currentWindow =>{      let property = currentWindow.getWindowProperties();      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);      // 初始化显示区域高度      this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);      // 监视软键盘的弹出和收起      currentWindow.on('avoidAreaChange', async data => {        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {          return;        }        this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height);      })    })  }
  build() {    Row() {      Column() {        Text('请输入短信验证码')          .fontSize(30)          .margin({            bottom:'50'          })        TextInput()          .width('70%')          .height('150px')          .margin({            bottom: '30'          })        Button('确定')          .width('70%')          .margin('20px')      }      .width('100%')    }    .width('100%').height(this.screenHeight)  }}