ArkTS的滑动加载案例

 

/**
 * ArkTS的滑动加载案例
 */

// 自定义文章类
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 {

  article: Article

  build() {
    Row() {
      // Image('../../resources/base/media/icon.png')
      Image($r('app.media.icon'))
        .width(80)
        .height(80)
        .margin({right: 20})

      Column() {
        Text(this.article.title)
          .fontSize(20)
          .margin({bottom: 8})
          .fontColor(Color.Red)

        Text(this.article.content)
          .fontSize(16)
          .fontColor(Color.Brown)
          .margin({bottom: 8})
      }
      .alignItems(HorizontalAlign.Start)
      .width('80%')
      .height('100%')
    }
    .padding(20)
    .borderRadius(12)  // 圆角矩形
    .backgroundColor('#FFECECEC')
    .height(80)
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Entry
@Component
struct MyParent {
  // 是否导到列表的底部
  @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篇文章', '精进自己，分享他人！'),
    new Article(7, '第7篇文章', '精进自己，分享他人！'),
    new Article(8, '第8篇文章', '精进自己，分享他人！'),
    new Article(9, '第9篇文章', '精进自己，分享他人！')
  ]

  build() {
    Column() {
      List() {
        ForEach(this.article_array, (item: Article)=>{
          ArticleComponent({article: item})
            .margin({top:20})

        })
      }.onReachEnd(()=>{
        // 到达列表的底部
        this.isListReachEnd = true
      })
      .parallelGesture(PanGesture({direction:PanDirection.Up, distance:80})
        .onActionStart(()=>{
          // 检测到往上滑动的手势
          if (this.isListReachEnd) {
            // 加载新的文章
            for (let index = 0; index < 3; index++) { // 一次加载3篇文章，循环可更改
              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(20)
      .scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
  }
}

 

 

 

来源B站公开视频：
华为大佬最新鸿蒙HarmonyOS4.0（鸿蒙4）开发应用从入门到实战视频教程