HarmonyOS 下拉加载更多?

1.因为聊天详情页面需要使用下拉加载更多聊天记录的功能(正常的三方组件都是下拉刷新,会定位到数组数据的第一条),希望类似于普通的聊天软件一样,下拉加载了更多数据之后,类似于普通的上拉加载更多数据停留在当前位置,有没有相关的三方组件或者官方解决方案

2.输入框的键盘弹出后设置了键盘避让 会让整体的界面全部上移,如何实现 当聊天数据不足的时,键盘弹出不会遮挡聊天内容时,禁止键盘避让

阅读 423
1 个回答

目前可以试着给List添加scroller控制器,将列表跳回原先所在位置this.scroller.scrollToIndex,示例代码如下:

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State promptText: string = "Refreshing..."
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  private listScroller: Scroller = new Scroller()

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, promptText: this.promptText }) {
        List({ scroller: this.listScroller }) {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .width('70%')
                .height(80)
                .fontSize(16)
                .margin(10)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            }
          }, (item: string, index: number) => item + index)
        }
        .onScrollIndex((first: number) => {
          console.info(first.toString())
        })
        .width('100%')
        .height('100%')
        .alignListItem(ListItemAlign.Center)
        .scrollBar(BarState.On)
      }
      .backgroundColor(0x89CFF0)
      .pullToRefresh(true)
      .refreshOffset(96)
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onOffsetChange((value: number) => {
        console.info('Refresh onOffsetChange offset:' + value)
      })
      .onRefreshing(() => {
        // setTimeout(() => {
        //   this.isRefreshing = false
        // }, 2000)
        for (let index = 0; index < 5; index++) {
          this.arr.unshift(`hello${index}`)
        }
        this.listScroller.scrollToIndex(5)
        this.isRefreshing = false
        console.log('onRefreshing test')
      })
    }
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进