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. }

复制代码

三、小结

• 下拉革新Refresh及自定义组件
  
• 加载更多及自定义组件
  

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