前言
各位同学大家好， 有段时间没有给大家更新文章了 ，最近在开发 鸿蒙next中 有用到这个下拉刷新和上来加载的功能就准备写个文章分享一下 那么废话不多说 我们正式开始：
效果图
准备工作：
找到我们DevEco studio 的安装位置
找到我们ohpm 的bin目录
配置在环境变了中
新建
把我们的路径粘贴到这里然后确定
最后在cmd 输入ohpm 出现如图画面就是配置成功
打开项目
输入如下命令
bash
ohpm install @ohos/pulltorefresh 出现安装成功提示即可
代码具体实现
定义2个数组模拟数据
typescript
@State refreshText: string = '';
private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
private dataStrings: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录'];
@State data: string[] = this.dataStrings;list界面展示
scss
@Builder
private getListView() {
List({ space: 20, scroller: this.scroller }) {
ForEach(this.data, (item: string) => {
ListItem() {
Text(item)
.width('100%')
.height(150)
.fontSize(20)
.textAlign(TextAlign.Center)
.backgroundColor('#95efd2')
}
})
}
.backgroundColor('#eeeeee')
.divider({ strokeWidth: 1, color: 0x222222 })
.edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
}build 里面使用到我们 PullToRefresh 组件
typescript
build() {
Column() {
PullToRefresh({
// 必传项，列表组件所绑定的数据
data: $data,
// 必传项，需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项，自定义主体布局，内部有列表或宫格组件
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
// 可选项，下拉刷新回调
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('刷新成功');
this.data = this.dataNumbers;
}, 2000);
});
},
// 可选项，上拉加载更多回调
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('');
this.data.push("增加的条目" + this.data.length);
}, 2000);
});
},
customLoad: null,
customRefresh: null,
})
}
}加载list的方法
javascript
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},下拉刷新的回调方法
typescript
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('刷新成功');
this.data = this.dataNumbers;
}, 2000);
});
},上拉加载更多的回调方法
typescript
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('');
this.data.push("增加的条目" + this.data.length);
}, 2000);
});
},完整代码
typescript
import { PullToRefresh } from '@ohos/pulltorefresh'
@Entry
@Component
struct Index {
@State refreshText: string = '';
private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
private dataStrings: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录'];
@State data: string[] = this.dataStrings;
// 需绑定列表或宫格组件
private scroller: Scroller = new Scroller();
build() {
Column() {
PullToRefresh({
// 必传项，列表组件所绑定的数据
data: $data,
// 必传项，需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项，自定义主体布局，内部有列表或宫格组件
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
// 可选项，下拉刷新回调
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('刷新成功');
this.data = this.dataNumbers;
}, 2000);
});
},
// 可选项，上拉加载更多回调
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('');
this.data.push("增加的条目" + this.data.length);
}, 2000);
});
},
customLoad: null,
customRefresh: null,
})
}
}
@Builder
private getListView() {
List({ space: 20, scroller: this.scroller }) {
ForEach(this.data, (item: string) => {
ListItem() {
Text(item)
.width('100%')
.height(150)
.fontSize(20)
.textAlign(TextAlign.Center)
.backgroundColor('#95efd2')
}
})
}
.backgroundColor('#eeeeee')
.divider({ strokeWidth: 1, color: 0x222222 })
.edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
}
}最后总结 ：
鸿蒙next中的上来加载下拉刷新有在ohpm有前人做好的很好三方库实现了 当然你也可以自己去编写计算滑动的高度坐标来处理上拉加载和下拉刷新。 今天的文章就讲到这里有兴趣的同学可以配置好ohpm的环境变量 然后使用三方来体验这个效果 同时也感谢开发三方的作者感谢你们。 也希望鸿蒙和华为发展越来越好，最后的最后 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 如果了解更多鸿蒙开发的知识 可以关注坚果派公众号 。 谢谢
更多鸿蒙的学习和需求可以关注坚果派
坚果派：
坚果派由坚果等人联合创建，团队拥有12个华为HDE，以及若干其他领域的三十余位万粉博主运营。专注于研究的技术包括HarmonyOS/OpenHarmony，仓颉，AI、BlueOS操作系统等。主营业务是面向国内外客户提供新一代信息技术为核心的产品、解决方案和服务。团队聚焦"鸿蒙原生应用"、"智能物联"和"AI赋能"、"人工智能"四大业务领域，依托华为开发者专家等强大的技术团队，以及涵盖需求、开发、测试、运维于一体的综合服务体系，赋能文旅、媒体、社交、家居、消费电子等行业客户，满足客户数字化升级转型的需求，帮助客户实现价值提升,欢迎合作。