OpenHarmony环境下可用的下拉刷新、上拉加载组件【PullToRefresh】

简介

PullToRefresh是一款OpenHarmony环境下可用的下拉刷新、上拉加载组件。
支持设置内置动画的各种属性,支持设置自定义动画,支持lazyForEarch的数据作为数据源。

效果展示:

内置动画效果

下载安装

ohpm install @ohos/pulltorefresh

使用说明

快速使用

import { PullToRefresh } from '@ohos/pulltorefresh'

// 需绑定列表或宫格组件
private scroller: Scroller = new Scroller();
  
PullToRefresh({
// 必传项,列表组件所绑定的数据
data: $data,
// 必传项,需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项,自定义主体布局,内部有列表或宫格组件
customList: () => {
  // 一个用@Builder修饰过的UI方法
  this.getListView();
},
// 可选项,下拉刷新回调
onRefresh: () => {
  return new Promise((resolve, reject) => {
    // 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
    setTimeout(() => {
      resolve('刷新成功');
      this.data = this.dataNumbers;
    }, 2000);
  });
},
// 可选项,上拉加载更多回调
onLoadMore: () => {
  return new Promise((resolve, reject) => {
    // 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
    setTimeout(() => {
      resolve('');
      this.data.push("增加的条目" + this.data.length);
    }, 2000);
  });
},
customLoad: null,
customRefresh: null,
})

其中List组件需要设置edgeEffect属性为(EdgeEffect.None)

设置属性示例和设置自定义动画示例请看示例entry

支持lazyForEarch的数据作为数据源

LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了,框架会根据滚动容器可视区域按需创建组件,当组件滑出可视区域外时,框架会进行组件销毁回收以降低内存占用

接口描述:

LazyForEach(
    dataSource: IDataSource,             // 需要进行数据迭代的数据源
    itemGenerator: (item: any, index?: number) => void,  // 子组件生成函数
    keyGenerator?: (item: any, index?: number) => string // 键值生成函数
): void

IDataSource类型说明

interface IDataSource {
    totalCount(): number; // 获得数据总数
    getData(index: number): Object; // 获取索引值对应的数据
    registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器
    unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器
}

DataChangeListener类型说明

interface DataChangeListener {
    onDataReloaded(): void; // 重新加载数据时调用
    onDataAdded(index: number): void; // 添加数据时调用
    onDataMoved(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
    onDataDeleted(index: number): void; // 删除数据时调用
    onDataChanged(index: number): void; // 改变数据时调用
    onDataAdd(index: number): void; // 添加数据时调用
    onDataMove(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
    onDataDelete(index: number): void; // 删除数据时调用
    onDataChange(index: number): void; // 改变数据时调用
}

具体使用请看 openharmony:LazyForEach:数据懒加载

属性(接口)说明

PullToRefresh组件属性

属性类型释义默认值
dataObject[]列表或宫格组件所绑定的数据undefined
scrollerScroller列表或宫格组件所绑定的Scroller对象undefined
customList() => void自定义主体布局,内部有列表或宫格组件undefined
refreshConfiguratorPullToRefreshConfigurator组件属性配置PullToRefreshConfigurator
mWidthLength容器宽undefined(自适应)
mHeightLength容器高undefined(自适应)
onRefresh() => Promise下拉刷新回调1秒后结束下拉刷新动画并提示“刷新失败”
onLoadMore() => Promise上拉加载更多回调1秒后结束上拉加载动画
customRefresh() => void自定义下拉刷新动画布局undefined
onAnimPullDown(value?: number, width?: number, height?: number) => void下拉中回调undefined
onAnimRefreshing(value?: number, width?: number, height?: number) => void刷新中回调undefined
customLoad() => void自定义上拉加载动画布局undefined
onAnimPullUp(value?: number, width?: number, height?: number) => void上拉中回调undefined
onAnimLoading(value?: number, width?: number, height?: number) => void加载中回调undefined

PullToRefreshConfigurator类接口

接口参数类型释义默认值
setHasRefreshboolean是否具有下拉刷新功能true
setHasLoadMoreboolean是否具有上拉加载功能true
setMaxTranslatenumber可下拉上拉的最大距离100
setSensitivitynumber下拉上拉灵敏度0.7
setListIsPlacementboolean滑动结束后列表是否归位true
setAnimDurationnumber滑动结束后,回弹动画执行时间150
setRefreshHeightnumber下拉动画高度30
setRefreshColorstring下拉动画颜色‘#999999’
setRefreshBackgroundColorResourceColor下拉动画区域背景色‘rgba(0,0,0,0)’
setRefreshTextColorResourceColor下拉加载完毕后提示文本的字体颜色‘#999999’
setRefreshTextSizenumber 或 string 或 Resource下拉加载完毕后提示文本的字体大小18
setRefreshAnimDurationnumber下拉动画执行一次的时间1000
setLoadImgHeightnumber上拉动画中图片的高度30
setLoadBackgroundColorResourceColor上拉动画区域背景色‘rgba(0,0,0,0)’
setLoadTextColorResourceColor上拉文本的字体颜色‘#999999’
setLoadTextSizenumber 或 string 或 Resource上拉文本的字体大小18
setLoadTextPullUp1string上拉1阶段文本‘正在上拉刷新…’
setLoadTextPullUp2string上拉2阶段文本‘放开刷新’
setLoadTextLoadingstring上拉加载更多中时的文本‘正在玩命加载中…’

约束与限制

在下述版本验证通过:

  • DevEco Studio: 4.1 Canary(4.1.3.317), SDK: API11 (4.1.0.36)
  • DevEco Studio: 4.0 (4.0.3.512), SDK: API10 (4.0.10.9)
  • DevEco Studio: 4.0 Canary2(4.0.3.300), SDK: API10 (4.0.8.6)
阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.1024c.cn/archives/21307,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?