纯血鸿蒙实战开发—如何添加下拉革新组件PullToRefresh

1.PullToRefresh

2.添加依靠

1.   ohpm install @ohos/pulltorefresh

复制代码

oh-package.json5版本修改为2.0.1。

1. {
2.   "name": "base_demo",
3.   "version": "1.0.0",
4.   "description": "Please describe the basic information.",
5.   "main": "",
6.   "author": "",
7.   "license": "",
8.   "dependencies": {
9.     "@ohos/pulltorefresh": "2.0.1"
10.   },
11.   "devDependencies": {
12.     "@ohos/hypium": "1.0.6"
13.   }
14. }

复制代码

3.示例代码

3.1 PullToRefreshPage测试页面

1. import { PullToRefresh } from '@ohos/pulltorefresh'
3. @Entry
4. @Component
5. struct PullToRefreshPage {
6.     TAG = 'PullToRefreshPage'
7. @State itemList: string[] = ['北京', '天津', '上海', '深圳', '珠海', '厦门', '青岛', '大连', '威海', '烟台', '旅顺', '长春', '哈尔滨', '沈阳']
8.     private scroller: Scroller = new Scroller();
10. @Builder
11.     navigationTitle() {
12.         Column() {
13.             Text('城市')
14.                 .fontColor('#182431')
15.                 .fontSize(30)
16.                 .lineHeight(41)
17.                 .fontWeight(700)
18.         }.alignItems(HorizontalAlign.Start)
19.     }
21. @Builder
22.     buildList() {
23.         List({ space: 3, scroller: this.scroller }) {
24.             ForEach(this.itemList, (item, index) => {
25.                 ListItem() {
27.                     Row() {
28.                         Image($r('app.media.icon'))
29.                             .width(40)
30.                             .height(40)
31.                             .margin({ left: 10, right: 20 })
32.                         Text(`${index}.${item}`).fontSize(20)
34.                     }.width('100%')
35.                         .height('100%')
36.                 }
37.             .width('100%')
38.                     .height(60)
39.             })
40.         }
41.     .divider({ strokeWidth: 0.5, color: Color.Green, startMargin: 10, endMargin: 10 })
42.             .width('100%')
43.             // 特别注意：必须设置列表为滑动到边缘无效果，否则无法触发pullToRefresh组件的上滑下拉方法。
44.             .edgeEffect(EdgeEffect.None)
46.     }
48.     build() {
49.         Navigation() {
51.             PullToRefresh({
52.                 // 必传项，列表组件所绑定的数据
53.                 data: this.itemList,
54.                 // 必传项，需绑定传入主体布局内的列表或宫格组件
55.                 scroller: this.scroller,
56.                 // 必传项，自定义主体布局，内部有列表或宫格组件
57.                 customList: () => {
58.                     this.buildList()
59.                 },
60.                 // 可选项，下拉刷新回调
61.                 onRefresh: () => {
62.                     console.info(`${this.TAG} onRefresh`)
63.                     return new Promise<string>((resolve, reject) => {
64.                         // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
65.                         console.info(`${this.TAG} Promise`)
66.                         setTimeout(() => {
67.                             resolve('刷新成功');
68.                             console.info(`${this.TAG} resolve`)
69.                             //this.itemList = this.dataNumbers;
70.                             const citys: string[] = ['上拉刷新出来的郑州', '上拉刷新出来的济南', '上拉刷新出来的沈阳']
71.                             this.itemList = this.itemList.concat(citys)
72.                             console.info(`${this.TAG} itemList:${this.itemList} `)
73.                         }, 1000);
74.                     });
75.                 },
76.                 // 可选项，上拉加载更多回调
77.                 onLoadMore: () => {
78.                     return new Promise<string>((resolve, reject) => {
79.                         console.info(`${this.TAG} onLoadMore Promise`)
80.                         // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
81.                         setTimeout(() => {
82.                             console.info(`${this.TAG}  onLoadMore resolve`)
83.                             resolve('');
84.                             this.itemList.push('上拉加载出来的武汉')
85.                             console.info(`${this.TAG} onLoadMore itemList:${this.itemList} `)
86.                         }, 1000);
87.                     });
88.                 },
89.                 customLoad: null,
90.                 customRefresh: null,
91.             })
93.         }
94.     .title(this.navigationTitle())
95.             .titleMode(NavigationTitleMode.Mini)
96.     }
97. }

复制代码

3.2.注意事项

List必须设置滑动到边沿没有效果

1. edgeEffect(EdgeEffect.None)

复制代码

否则无法触发pullToRefresh组件的上滑下拉方法。
4.效果

末了

假如你想快速提升鸿蒙技能，那么可以直接领取这份包含了：【OpenHarmony多媒体技能、Stage模型、ArkUI多端摆设、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技能知识点。
鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）
1.鸿蒙焦点技能学习路线

2.大厂面试必问面试题

3.鸿蒙南向开发技能

 4.鸿蒙APP开发必备

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

这份全套完整版的学习资料已经全部打包好，朋友们假如必要可以点击→鸿蒙Next全套VIP学习资料免费领取（安全链接，放心点击）


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