DEV Community

Cover image for Web Interaction, List Dragging, Landscape Layout, Event Sequence Issues, Scroll and Web Combination
kouwei qing
kouwei qing

Posted on

Web Interaction, List Dragging, Landscape Layout, Event Sequence Issues, Scroll and Web Combination

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Web Interaction, List Dragging, Landscape Layout, Event Sequence Issues, Scroll and Web Combination

1. How to Interact with Web Pages in HarmonyOS (Using JS)?

Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-1-V5

Implement a JSBridge communication solution by encapsulating javaScriptProxy and runJavaScript. Use the Web component's javaScriptProxy to inject native-side interfaces into the H5's window object. Execute JS scripts in H5 via the runJavaScript interface and obtain execution results in the callback. The specific call process is shown in the figure below:

2. How to Implement Drag-and-Drop Sorting for ListItems in HarmonyOS?

Lists can achieve this through drag events onItemDragMove and onItemDrop.

Demo:

@Entry
@Component
struct ListExample {
  @State arr: number[] = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  @State dragItem: number = -1

  // Dragging element (note: not the index)
  @Builder
  dragFloatView(item: number) {
    Column() {
      Text('' + item)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        .backgroundColor(Color.White)
        .fontSize(16)
        .width('100%')
        .height(100)
    }
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .visibility(item == this.dragItem ? Visibility.Hidden : Visibility.Visible)
          .id(item.toString())
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical)
      .width('100%')
      .onItemMove((from: number, to: number) => {
        return true
      })
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
        // Triggered when starting to drag a list element
        this.dragItem = this.arr[itemIndex]
        return this.dragFloatView(this.arr[itemIndex])
      })
      .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
        // Triggered when dragging within the list element range
        animateTo({ duration: 200, curve: Curve.Linear }, () => {
          let deleteIndex = this.arr.indexOf(Number(this.dragItem))
          this.arr.splice(deleteIndex, 1)
          this.arr.splice(insertIndex, 0, Number(this.dragItem))
        })
      })
      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
        // The list element bound to this event can be a drag release target, triggered when dragging stops within the list element
        this.dragItem = -1
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Layout Issues After Switching to Landscape Mode in HarmonyOS

After using window.setPreferredOrientation to force landscape mode, the Navigation width is normal, but the width of its content components is incorrect.

You can use onPageShow and onPageHide to set landscape mode at the page level:

onPageShow(): void {
  // window.getLastWindow(getContext(this), (err, win) => {
  // win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
  // })
}

onPageHide(): void {
  window.getLastWindow(getContext(this), (err, win) => {
    win.setPreferredOrientation(window.Orientation.PORTRAIT)
  })
}
Enter fullscreen mode Exit fullscreen mode

Alternatively, call landscape mode when navigating from the previous interface to the second interface. Example:

Button('Interface Navigation')
  .onClick(() => {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
    })

    router.pushUrl({
      url: "pages/Index2"
    })
  })
Enter fullscreen mode Exit fullscreen mode

For detailed usage of setPreferredOrientation, refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setpreferredorientation9

4. The eventId Can Only Be a Number, Prone to Duplication in HarmonyOS?

Custom Enumeration Type Constants:

export const enum EventID {
  CHAT = 1,
  CLICK = 2,
  TOUCH = 3
}
export const showCaptchaEvent: emitter.InnerEvent = {
  eventId: EventID.CHAT
}
Enter fullscreen mode Exit fullscreen mode

Combine with Timestamps:

Record the timestamp for each event and use the event ID together with the timestamp to distinguish events occurring in different time periods, avoiding duplication.

Use Incremental IDs:

Assign a unique incremental ID to each event to ensure uniqueness. Use the incremental ID instead of the original event ID when storing event information.

Use Database Indexes:

Create indexes for event IDs when storing event information to facilitate fast querying and filtering, ensuring index correctness and efficiency.

5. HarmonyOS: Scroll Nested with Web, Web Content Height Auto-Adapts, and the Overall Page Scrolls Together

Use .layoutMode(WebLayoutMode.FIT_CONTENT) to adapt to the web layout. If the web content width or length exceeds 8000px, specify RenderMode.SYNC_RENDER when creating the Web component.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ZH-CN_TOPIC_0000001930757269__nestedscroll11

Top comments (0)