ToB企服应用市场:ToB评测及商务社交产业平台

标题: HarmonyOS NEXT星河版之自定义List下拉革新与加载更多 [打印本页]
作者: 风雨同行    时间: 2024-6-21 13:15
标题: HarmonyOS NEXT星河版之自定义List下拉革新与加载更多
一、加载更多

借助List的onReachEnd方法，实现加载更多功能，结果如下：


  2. @Component
  3. export struct HPList {
  4.   // 数据源
  5.   @Prop dataSource: object[] = []
  6.   // 加载更多是否ing
  7.   @State isLoadingMore: boolean = false
  8.   // 是否还有更多
  9.   @Prop hasMore: boolean = false
  10.   // 渲染Item
  11.   @BuilderParam renderItem: (item: object) => void
  12.   // 加载更多回调
  13.   onLoadMore: () => void = () => {
  14.   }
  15.   // 加载更多文案
  16.   loadingMoreText: string = '加载中...'
  17.   // 没有更多文案
  18.   noMoreDataText: string = '没有更多啦'
  20.   @Builder
  21.   getLoadMoreView() {
  22.     Row() {
  23.       if (!this.hasMore) {
  24.         Text(this.noMoreDataText)
  25.           .fontSize(14)
  26.           .fontColor($r('app.color.text_secondary'))
  27.       } else {
  28.         Row({ space: 8 }) {
  29.           LoadingProgress()
  30.             .width(30)
  31.             .height(30)
  32.             .color(Color.Orange)
  33.           Text(this.loadingMoreText)
  34.             .fontSize(14)
  35.             .fontColor($r('app.color.text_secondary'))
  36.         }
  37.       }
  38.     }
  39.     .height(60)
  40.     .width('100%')
  41.     .justifyContent(FlexAlign.Center)
  42.   }
  44.   build() {
  45.     List() {
  46.       ForEach(this.dataSource, (item: object) => {
  47.         ListItem() {
  48.           if (this.renderItem) {
  49.             this.renderItem(item)
  50.           }
  51.         }
  52.       })
  53.       // 加载更多view
  54.       ListItem() {
  55.         this.getLoadMoreView()
  56.       }
  57.     }
  58.     .onReachEnd(async () => {
  59.       if (!this.isLoadingMore && this.hasMore) {
  60.         this.isLoadingMore = true
  61.         await this.onLoadMore()
  62.         this.isLoadingMore = false
  63.       }
  64.     })
  65.   }
  66. }
复制代码
使用：
  1. import { HPList } from '@hp/basic'
  2. import { promptAction } from '@kit.ArkUI'
  4. @Preview
  5. @Component
  6. export struct Task {
  7.   // 模拟数据
  8.   @State dataList: Person[] = [{
  9.     name: '1'
  10.   }, {
  11.     name: '2'
  12.   }, {
  13.     name: '3'
  14.   }, {
  15.     name: '4'
  16.   }, {
  17.     name: '5'
  18.   }, {
  19.     name: '6'
  20.   }, {
  21.     name: '7'
  22.   }, {
  23.     name: '8'
  24.   }, {
  25.     name: '9'
  26.   }, {
  27.     name: '10'
  28.   }, {
  29.     name: '11'
  30.   }, {
  31.     name: '12'
  32.   }]
  33.   @State hasMore: boolean = true
  34.   isFirstIn: boolean = true
  36.   @Builder
  37.   renderItem(item: object) {
  38.     Row() {
  39.       Text(JSON.stringify(item))
  40.         .fontSize(16)
  41.         .textAlign(TextAlign.Center)
  42.     }
  43.     .width('100%')
  44.     .height(80)
  45.     .borderRadius(15)
  46.     .backgroundColor(Color.Pink)
  47.     .justifyContent(FlexAlign.Center)
  48.     .margin({ bottom: 10 })
  49.   }
  51.   /**
  52.    * 加载更多
  53.    */
  54.   async loadMore() {
  55.     // 首次渲染数据为空时，也会调loadMore
  56.     if (this.isFirstIn) {
  57.       this.isFirstIn = false
  58.       return
  59.     }
  60.     await new Promise<void>((resolve, reject) => {
  61.       setTimeout(() => {
  62.         // 模拟数据
  63.         this.dataList = this.dataList.concat(this.dataList.slice(5))
  64.         if (this.dataList.length > 30) {
  65.           this.hasMore = false
  66.         }
  67.         resolve()
  68.       }, 3000)
  69.     });
  70.   }
  72.   build() {
  73.     HPList({
  74.       dataSource: this.dataList,
  75.       hasMore: this.hasMore,
  76.       renderItem: (item: object) => {
  77.         this.renderItem(item)
  78.       },
  79.       onLoadMore: () => {
  80.         this.loadMore()
  81.       }
  82.     })
  83.   }
  84. }
  86. class Person {
  87.   name: string = ''
  88. }
复制代码
二、下拉革新

通过Refresh实现下拉革新，并自定义头部，结果如下：



代码如下：
  1. import { promptAction } from '@kit.ArkUI'
  3. @Component
  4. export struct HPList {
  5.   // 数据源
  6.   @Prop dataSource: object[] = []
  7.   // 加载更多是否ing
  8.   @State isLoadingMore: boolean = false
  9.   // 是否还有更多
  10.   @Prop hasMore: boolean = false
  11.   // 渲染Item
  12.   @BuilderParam renderItem: (item: object) => void
  13.   // 加载更多回调
  14.   onLoadMore: () => void = () => {
  15.   }
  16.   // 加载更多文案
  17.   loadingMoreText: string = '加载中...'
  18.   // 没有更多文案
  19.   noMoreDataText: string = '没有更多啦'
  20.   // 是否下拉刷新ing
  21.   @State isRefreshing: boolean = false
  22.   // 下拉刷新回调
  23.   onRefresh: () => void = () => {
  24.   }
  25.   @State refreshState: RefreshStatus = RefreshStatus.Inactive
  27.   // 获取下拉文本
  28.   getStatusText() {
  29.     switch (this.refreshState) {
  30.       case RefreshStatus.Inactive:
  31.         return ""
  32.       case RefreshStatus.Drag:
  33.         return "继续下拉"
  34.       case RefreshStatus.OverDrag:
  35.         return "松开刷新"
  36.       case RefreshStatus.Refresh:
  37.         return "加载中"
  38.     }
  39.     return ""
  40.   }
  42.   @Builder
  43.   getRefreshView() {
  44.     Row({ space: 10 }) {
  45.       LoadingProgress()
  46.         .color($r('app.color.primary'))
  47.         .width(40)
  48.         .height(40)
  49.       Text(this.getStatusText())
  50.         .fontColor($r('app.color.text_secondary'))
  51.         .fontSize(14)
  52.     }
  53.     .justifyContent(FlexAlign.Center)
  54.     .height(50)
  55.     .width('100%')
  56.   }
  58.   @Builder
  59.   getLoadMoreView() {
  60.     Row() {
  61.       if (!this.hasMore) {
  62.         Text(this.noMoreDataText)
  63.           .fontSize(14)
  64.           .fontColor($r('app.color.text_secondary'))
  65.       } else {
  66.         Row({ space: 8 }) {
  67.           LoadingProgress()
  68.             .width(30)
  69.             .height(30)
  70.             .color(Color.Orange)
  71.           Text(this.loadingMoreText)
  72.             .fontSize(14)
  73.             .fontColor($r('app.color.text_secondary'))
  74.         }
  75.       }
  76.     }
  77.     .height(60)
  78.     .width('100%')
  79.     .justifyContent(FlexAlign.Center)
  80.   }
  82.   build() {
  83.     Refresh({ refreshing: $$this.isRefreshing, builder: this.getRefreshView() }) {
  84.       List() {
  85.         ForEach(this.dataSource, (item: object) => {
  86.           ListItem() {
  87.             if (this.renderItem) {
  88.               this.renderItem(item)
  89.             }
  90.           }
  91.         })
  92.         // 加载更多view
  93.         ListItem() {
  94.           this.getLoadMoreView()
  95.         }
  96.       }
  97.       .onReachEnd(async () => {
  98.         if (!this.isLoadingMore && this.hasMore) {
  99.           this.isLoadingMore = true
  100.           await this.onLoadMore()
  101.           this.isLoadingMore = false
  102.         }
  103.       })
  104.     }
  105.     .onStateChange(async (state) => {
  106.       this.refreshState = state
  107.       if (state === RefreshStatus.Refresh) {
  108.         await this.onRefresh()
  109.         this.isRefreshing = false
  110.       }
  111.     })
  113.   }
  114. }
复制代码
使用：
  1. import { HPList } from '@hp/basic'
  2. import { promptAction } from '@kit.ArkUI'
  4. @Preview
  5. @Component
  6. export struct Task {
  7.   // 模拟数据
  8.   @State dataList: Person[] = [{
  9.     name: '1'
  10.   }, {
  11.     name: '2'
  12.   }, {
  13.     name: '3'
  14.   }, {
  15.     name: '4'
  16.   }, {
  17.     name: '5'
  18.   }, {
  19.     name: '6'
  20.   }, {
  21.     name: '7'
  22.   }, {
  23.     name: '8'
  24.   }, {
  25.     name: '9'
  26.   }, {
  27.     name: '10'
  28.   }, {
  29.     name: '11'
  30.   }, {
  31.     name: '12'
  32.   }]
  33.   @State hasMore: boolean = true
  34.   isFirstIn: boolean = true
  36.   @Builder
  37.   renderItem(item: object) {
  38.     Row() {
  39.       Text(JSON.stringify(item))
  40.         .fontSize(16)
  41.         .textAlign(TextAlign.Center)
  42.     }
  43.     .width('100%')
  44.     .height(80)
  45.     .borderRadius(15)
  46.     .backgroundColor(Color.Pink)
  47.     .justifyContent(FlexAlign.Center)
  48.     .margin({ bottom: 10 })
  49.   }
  51.   async onRefresh() {
  52.     await new Promise<void>((resolve, reject) => {
  53.       setTimeout(() => {
  54.         this.dataList = [{
  55.           name: '旺财'
  56.         },
  57.           {
  58.             name: '张三'
  59.           }, {
  60.             name: '李四'
  61.           }, {
  62.             name: '王五'
  63.           },
  64.           {
  65.             name: '张三1'
  66.           }, {
  67.             name: '李四1'
  68.           }, {
  69.             name: '王五1'
  70.           },
  71.           {
  72.             name: '张三2'
  73.           }, {
  74.             name: '李四2'
  75.           }, {
  76.             name: '王五2'
  77.           }]
  78.         resolve()
  79.       }, 3000)
  80.     });
  81.   }
  83.   /**
  84.    * 加载更多
  85.    */
  86.   async loadMore() {
  87.     // 首次渲染数据为空时，也会调loadMore
  88.     if (this.isFirstIn) {
  89.       this.isFirstIn = false
  90.       return
  91.     }
  92.     promptAction.showToast({ message: 'opppp' })
  93.     await new Promise<void>((resolve, reject) => {
  94.       setTimeout(() => {
  95.         // 模拟数据
  96.         this.dataList = this.dataList.concat(this.dataList.slice(5))
  97.         if (this.dataList.length > 30) {
  98.           this.hasMore = false
  99.         }
  100.         resolve()
  101.       }, 3000)
  102.     });
  103.   }
  105.   build() {
  106.     HPList({
  107.       dataSource: this.dataList,
  108.       hasMore: this.hasMore,
  109.       renderItem: (item: object) => {
  110.         this.renderItem(item)
  111.       },
  112.       onLoadMore:async  () => {
  113.         await this.loadMore()
  114.       },
  115.       onRefresh: async () => {
  116.         await this.onRefresh()
  117.       }
  118.     })
  119.   }
  120. }
  122. class Person {
  123.   name: string = ''
  124. }
复制代码
三、小结



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4