【每日学点 HarmonyOS Next 知识】Web 交互、列表拖拽、横屏后布局、Event 序列问题、Scroll 与 Web 组合

@Entry@Componentstruct ListExample {  @State arr: number[] = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]  @State dragItem: number = -1
  // 拖动的元素，注意不是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) => {        // 开始拖拽列表元素时触发。        this.dragItem = this.arr[itemIndex]        return this.dragFloatView(this.arr[itemIndex])      })      .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {        // 拖拽在列表元素范围内移动时触发。        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) => {        // 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发。        this.dragItem = -1      })    }    .width('100%')    .height('100%')    .backgroundColor(0xDCDCDC)  }}

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)})

Button('界面跳转')  .onClick(()=>{    window.getLastWindow(getContext(this), (err, win) => {      win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)    })
    router.pushUrl({      url:"pages/Index2"    })  })

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