首页 > 其他分享 >ArkTS的滑动加载案例

ArkTS的滑动加载案例

时间:2024-01-17 12:00:27浏览次数:37  
标签:ArkTS 精进 new 篇文章 滑动 Article article id 加载

 

/**
 * 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%')
  }
}

 

 

标签:ArkTS,精进,new,篇文章,滑动,Article,article,id,加载
From: https://www.cnblogs.com/zhzhang/p/17969716

相关文章

  • ArkTS之循环渲染案例
      /***ArkTS之循环渲染*/@ComponentstructMyChild{label:stringbuild(){Text(this.label).fontSize(30)}}@Entry@ComponentstructMyParent{@Statemy_array:Array<string>=['one','two','three......
  • 鸿蒙HarmonyO实战-ArkTS语言(状态管理)
    ......
  • 使用pytorch加载llama
    使用PyTorch加载LLAMA数据集在深度学习中,数据集的选择和处理对于模型的性能和训练效果起着至关重要的作用。PyTorch是一个常用的深度学习框架,它提供了各种工具和函数来加载和处理各种常见的数据集。在本文中,我们将介绍如何使用PyTorch加载LLAMA数据集,并提供相应的代码示......
  • 鸿蒙HarmonyOS实战-ArkTS语言(基本语法)
    ......
  • 初次上手接触ArkTs
    本文分享自华为云社区《学习ArtTs--初见ArkTs》,作者:Uncle_Tom。1.前言需要静态分析去检查一个语言,必须对这个语言有深刻的认识,才能有效的对这个语言进行有效的检查。我常说:“作为一个程序分析员需要比一般的程序员考虑的更多。通常程序员只要考虑在需求和结果之间建立一条......
  • 聊聊如何实现动态加载spring拦截器
    前言之前写过一篇文章聊聊如何实现热插拔AOP,今天我们继续整一个类似的话题,聊聊如何实现spring拦截器的动态加载实现核心思路groovy热加载java+事件监听变更拦截器实现步骤1、在项目的pom引入groovyGAV<dependency><groupId>org.codehaus.groovy</groupI......
  • Idea SpringBoot 子模块 加载不到该子模块根目录config下面的配置文件
    IdeaSpringBoot子模块加载不到该子模块根目录config下面的配置文件importorg.mybatis.spring.annotation.MapperScan;importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;importorg.springframew......
  • Java的类加载机制
    Java的类加载机制是指在Java程序运行时,将类文件加载到内存中的一系列步骤。Java的类加载机制遵循着“按需加载”的原则,也就是说,只有在需要用到某个类的时候,才会将这个类的相关信息加载到内存中。这种“按需加载”的设计使得Java程序具备了很好的灵活性和效率。Java的类加载器......
  • PDF.js实现按需分片加载pdf文件-包含前后端开发源码和详细开发教程
    PDF.js实现按需分片加载pdf文件-包含前后端开发源码和详细开发教程:https://blog.csdn.net/qq_29864051/article/details/130742657?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170529842016800186594900%2522%252C%2522scm%2522%253A%252220140713.130102334..%252......
  • 精确掌控并发:滑动时间窗口算法在分布式环境下并发流量控制的设计与实现
    这是《百图解码支付系统设计与实现》专栏系列文章中的第(15)篇,也是流量控制系列的第(2)篇。点击上方关注,深入了解支付系统的方方面面。上一篇介绍了固定时间窗口算法在支付渠道限流的应用以及使用redis实现的核心代码。本篇重点讲清楚分布式环境下滑动时间窗口算法原理和应用场景,以及使......