当前位置：首页 > news >正文

【Harmony OS 4.0】向上滑动加载案例

news 2025/6/26 13:49:04

在这里插入图片描述

// 自定义class类对象类型
class Article {public id: numberpublic title: stringpublic content: stringconstructor(id: number, title: string, content: string) {this.id = idthis.title = titlethis.content = content}
}// 子组件
@Component
struct ArticleComponent {@Prop article: Articlebuild() {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.lengthlet new_id = count += 1this.article_array.push(new Article(new_id, `第${new_id}篇文章`, '文章的内容和介绍'))this.isListReachEnd = false}})).padding(10).scrollBar(BarState.Off) // 页面滚动条不显示}.width('100%').height('100%')}
}