【HarmonyOS 4.0】向上滑动加载数据代码示例

// 自定义class类对象类型
class Article {
  public id: number
  public title: string
  public content: string

  constructor(id: number, title: string, content: string) {
    this.id = id
    this.title = title
    this.content = content
  }
}

// 子组件
@Component
struct ArticleComponent {
  @Prop article: Article

  build() {
    Row() {
      Column() {
        Image($r('app.media.startIcon')).width(80).height(80).margin({ right: 15 }) // 取项目resources图标
      }

      Column() {
        Text(this.article.title).fontSize(20).margin({ bottom: 5 })
        Text(this.article.content).fontSize(16).fontColor('#666666')
      }
      .alignItems(HorizontalAlign.Start) // Column容器组件的属性alignItems，alignItems(HorizontalAlign.Start)设置子元素水平方向距左对齐方式
      .width('100%')
      .height('100%')
    }
    .padding(18)
    .borderRadius(16)
    .backgroundColor('#EEEEEE')
    .width('100%')
    .height(120)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

// 父组件
@Entry
@Component
struct UITest10 {
  @State isListReachEnd: boolean = false // 是否到达列表底部
  @State article_array: Array<Article> = [
    new Article(1, '第1篇文章', '文章的内容和介绍'),
    new Article(2, '第2篇文章', '文章的内容和介绍'),
    new Article(3, '第3篇文章', '文章的内容和介绍'),
    new Article(4, '第4篇文章', '文章的内容和介绍'),
    new Article(5, '第5篇文章', '文章的内容和介绍'),
    new Article(6, '第6篇文章', '文章的内容和介绍')
  ]

  build() {
    Column() {
      List() {
        ForEach(this.article_array, (item: Article) => {
          ArticleComponent({ article: item }).margin({ top: 15 })
        })
      }
      // 列表到底末尾位置时触发。List边缘效果为弹簧效果时，划动经过末尾位置时触发一次，回弹回末尾位置时再触发一次。
      .onReachEnd(() => {
        this.isListReachEnd = true
      })
      // 给列表绑定并行手势方法，手势方法用的是拖动手势，向上拖动，80
      .parallelGesture(PanGesture({ direction: PanDirection.Up, distance: 80 })
        // 拖动手势的事件 - 手势识别成功回调
        .onActionStart(() => {
        if (this.isListReachEnd) { // 监测到向上滑动80的手势
          // 进行加载
          let count = this.article_array.length
          let new_id = count += 1
          this.article_array.push(new Article(new_id, `第${new_id}篇文章`, '文章的内容和介绍'))
          this.isListReachEnd = false
        }
      }))
      .padding(10)
      .scrollBar(BarState.Off) // 页面滚动条不显示
    }
    .width('100%')
    .height('100%')
  }
}

onReachEnd 列表布局的事件
parallelGesture PanGesture onActionStart 手势交互事件