Pull-to-Refresh, Scroll Nesting Web, This Keyword Reference, Routing Scheme, Input Method Occlusion

[Daily HarmonyOS Next Knowledge] Pull-to-Refresh, Scroll Nesting Web, This Keyword Reference, Routing Scheme, Input Method Occlusion

1. Does HarmonyOS have a pull-to-load-more control, or does the Refresh component support automatic bottom-triggered loading?

For pull-to-load-more functionality, refer to the documentation with relevant demos: 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

Pull-to-refresh and pull-to-load-more are common in mobile apps, such as content refresh and loading in news pages. Both operations work by responding to touch events, displaying a refresh/loading view at the top/bottom, and hiding it after completion.

Take pull-to-refresh as an example, implemented in three steps:

• Listen for the finger-down event and record the initial position.
• Listen for finger-movement events, calculate the displacement from the initial position (positive value for downward movement), and set a maximum allowable displacement.
• Listen for the finger-up event. If the displacement reaches the maximum, trigger data loading, show the refresh view, and hide it after loading completes.

2. Display issues when nesting multiple Web components in a Scroll view in HarmonyOS?

When using the Scroll component to nest two or more Web components for scrolling, the Web components cannot adapt to the height automatically:

• Without setting the height of the Web component, no content is displayed.
• Using Web().layoutMode(WebLayoutMode.FIT_CONTENT) does not display content.
• Setting Web().height('100%') or Web().height('80%') displays content, but it either occupies too much space for short content or truncates long content.

How to set the Web component to adapt to the height?

For nested scrolling with Web components, refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-nested-scrolling-V5

For setting the Web layout mode via layoutMode, refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11

3. When a Builder function is passed as a parameter to a control in HarmonyOS, does the this in the Builder's click event reference the original this?

In a Page, a control View is passed a built Builder function from the Page, but the this in the function's onClick does not reference the Page (causing the title to not update).

Reference demo:

@Component
struct CustomContainer {
  @Prop header: string = '';
  @Builder defaultBulder(){}

  @BuilderParam rightBuilder: () => void = this.defaultBulder
  build() {
    Column() {
      this.rightBuilder()
    }
  }
}
@Entry
@Component
struct 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. Conflict between HarmonyOS NavDestination routing and full-modal pages?

When using the Navigation-NavDestination routing scheme, using bindContentCover within a page to pop up a modal page causes lifecycle incompatibility:

• Popping up a full modal triggers the NavDestination's onHidden callback of the current page.
• Without using NavDestination, popping up a modal does not trigger the page's onPageHide callback.

bindContentCover constructs a full-screen modal transition, hence triggering onHidden. Refer to the NavDestination documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5

5. How to handle the input method covering interface buttons after popping up in HarmonyOS?

The login button is covered by the input panel when it pops up on the login page.

Reference demo:

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State screenHeight: number = 0;

  aboutToAppear() {
    window.getLastWindow(getContext(this)).then(currentWindow =>{
      let property = currentWindow.getWindowProperties();
      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);
      // Initialize the display area height
      this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);
      // Monitor soft keyboard pop-up and dismissal
      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)
  }
}