From fa3d0b7ce3acd3a7df0c3fa07255c26353b6a805 Mon Sep 17 00:00:00 2001 From: liangguirong Date: Sun, 15 Sep 2024 15:52:32 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=B7=BB=E5=8A=A0=E4=B8=AD=E8=8B=B1?= =?UTF-8?q?=E6=96=87README.md=E4=BF=AE=E6=94=B9=E4=BB=A5=E5=8F=8Ademo?= =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E5=A4=84=E7=90=86=202=E3=80=81loadT?= =?UTF-8?q?extPullUp1=E3=80=81loadTextPullUp2=E3=80=81loadTextLoading?= =?UTF-8?q?=E3=80=81loadText=E7=AD=89=E6=8E=A5=E5=8F=A3=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=20"string=20|=20Resource"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liangguirong --- OAT.xml | 8 + README.md | 263 +++++++++--------- README_EN.md | 175 ------------ README_zh.md | 171 ++++++++++++ changelog.md | 5 + entry/oh-package.json5 | 2 +- .../src/main/ets/entryability/EntryAbility.ts | 14 + entry/src/main/ets/pages/customConfig.ets | 21 +- .../src/main/ets/pages/customRefreshAnim.ets | 12 +- entry/src/main/ets/pages/fullScreen.ets | 12 +- entry/src/main/ets/pages/index.ets | 12 +- entry/src/main/ets/pages/interface.test.ets | 6 +- entry/src/main/ets/pages/lazyForEachGuide.ets | 5 +- entry/src/main/ets/pages/quickStart.ets | 13 +- entry/src/main/ets/pages/tabsTestPage.ets | 13 +- .../main/resources/base/element/string.json | 72 +++++ .../main/resources/zh_CN/element/string.json | 76 +++++ library/oh-package.json5 | 2 +- .../PullToRefresh/PullToRefresh.ets | 3 +- .../PullToRefreshConfigurator.ets | 14 +- .../main/resources/base/element/string.json | 20 ++ .../main/resources/zh_CN/element/string.json | 24 ++ oh-package.json5 | 5 +- 23 files changed, 593 insertions(+), 355 deletions(-) delete mode 100644 README_EN.md create mode 100644 README_zh.md create mode 100644 entry/src/main/resources/zh_CN/element/string.json create mode 100644 library/src/main/resources/zh_CN/element/string.json diff --git a/OAT.xml b/OAT.xml index 1bf7301..a335dfa 100644 --- a/OAT.xml +++ b/OAT.xml @@ -26,9 +26,15 @@ + + + @@ -36,6 +42,8 @@ + + diff --git a/README.md b/README.md index 8834763..8f183cd 100644 --- a/README.md +++ b/README.md @@ -1,172 +1,175 @@ # PullToRefresh -## 简介 +## Introduction -> PullToRefresh是一款OpenHarmony环境下可用的下拉刷新、上拉加载组件。 -> 支持设置内置动画的各种属性，支持设置自定义动画，支持lazyForEarch的数据作为数据源。 +PullToRefresh is an OpenHarmony UI component which allows users to pull down on a list or a page to trigger a refresh action and pull up to trigger a load action. +You can set built-in animation properties, customize animations, and use **lazyForEarch** data as the data source. -#### 效果展示： +#### Effect -内置动画效果 +Built-in animation effect -![Refresh](gifs/Refresh.gif)![Refresh](gifs/LoadMore.gif) +![Refresh](gifs/Refresh_EN.gif)![Refresh](gifs/LoadMore_EN.gif) -## 下载安装 +## How to Install ```shell ohpm install @ohos/pulltorefresh ``` -## 使用说明 +## How to Use -### 快速使用 +### Quick Start ```typescript import { PullToRefresh } from '@ohos/pulltorefresh' -// 需绑定列表或宫格组件 +// Create a scroller instance. private scroller: Scroller = new Scroller(); PullToRefresh({ -// 可选项，列表组件所绑定的数据 -data: this.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, + // (Optional) Data source of the list component. + data: this.data, + // (Mandatory) List or grid component in the main layout. + scroller: this.scroller, + // (Mandatory) Custom list or grid view. + customList: () => { + // A UI method decorated by @Builder. + this.getListView(); + }, + // (Optional) Callback used to handle the pull-down refresh action. + onRefresh: () => { + return new Promise((resolve, reject) => { + // Simulate a network request operation. When data is obtained 2 seconds after the network request, inform the component to refresh the list data. + setTimeout(() => { + resolve ('Refresh successful'); + this.data = [...this.dataNumbers]; + }, 2000); + }); + }, + // (Optional) Callback used to handle the pull-up loading action. + onLoadMore: () => { + return new Promise((resolve, reject) => { + // Simulate a network request operation. When data is obtained 2 seconds after the network request, inform the component to update the list data. + setTimeout(() => { + resolve(''); + this.data.push ("Added items" + this.data.length); + }, 2000); + }); + }, + customLoad: null, + customRefresh: null, }) ``` -设置属性示例和设置自定义动画示例请看[示例entry](https://gitee.com/openharmony-sig/PullToRefresh/tree/master/entry/src/main/ets/pages) +For details about how to set properties and customize animations, see [Example entry](https://gitee.com/openharmony-sig/PullToRefresh/tree/master/entry/src/main/ets/pages). -### 使用限制 -1、目前只支持List、Scroll、Tabs、Grid和WaterFlow系统容器组件； +### Constraints +- Only the **List**, **Scroll**, **Tabs**, **Grid**, and **WaterFlow** system container components are supported. +- The spring effect and shadow effect of the system container components cannot be set. The **edgeEffect** value must be **EdgeEffect.None**. -2、暂不支持设置系统容器组件的弹簧效果和阴影效果，使用时需要将系统组件edgeEffect属性的值设置为(EdgeEffect.None)； +- The pull-up loading action cannot be automatically triggered when the page bottom is reached. -3、暂不支持页面触底时自动触发上拉加载功能； +- The pull-up loading action cannot be triggered when the current screen is not fully occupied. -4、暂不支持在页面数据不满一屏时触发上拉加载功能； +- The pull-down refresh action cannot be triggered by code. -5、暂不支持通过代码的方式去触发下拉刷新功能； +- The callback used to return the gesture end indication is not supported when the pull-down refresh animation ends. -6、暂不支持在下拉刷新动画结束时提供手势结束的回调； -### 支持lazyForEarch的数据作为数据源 - LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用 - **接口描述：** +### Using LazyForEarch Data as Data Source +**LazyForEach** iterates over provided data sources and creates corresponding components during each iteration. When **LazyForEach** is used in a **Scroll** container, the framework creates components as required within the visible area of the **Scroll** container. When a component is out of the visible area, the framework destroys the component to release memory. + + **LazyForEach** + ```typescript LazyForEach( - dataSource: IDataSource, // 需要进行数据迭代的数据源 - itemGenerator: (item: any, index?: number) => void, // 子组件生成函数 - keyGenerator?: (item: any, index?: number) => string // 键值生成函数 + dataSource: IDataSource, // Data source to iterate over. + itemGenerator: (item: any, index?: number) => void, // Create child components. + keyGenerator?: (item: any, index?: number) => string // Create unique keys. ): void ``` -**IDataSource类型说明** +**IDataSource** + ```typescript interface IDataSource { - totalCount(): number; // 获得数据总数 - getData(index: number): Object; // 获取索引值对应的数据 - registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器 - unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器 + totalCount(): number; // Obtain the total number of data items. + getData(index: number): Object; // Obtain the data item that matches the specified index. + registerDataChangeListener(listener: DataChangeListener): void; // Register a data change listener. + unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister a data change listener. } ``` -**DataChangeListener类型说明** +**DataChangeListener** ```typescript 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; // 改变数据时调用 + onDataReloaded(): void; // Called when data is reloaded. + onDataAdded(index: number): void; // Called when data is added. + onDataMoved(from: number, to: number): void; // Called when data is moved. + onDataDeleted(index: number): void; // Called when data is deleted. + onDataChanged(index: number): void; // Called when data is changed. + onDataAdd(index: number): void; // Called to add data. + onDataMove(from: number, to: number): void; // Called to move data. + onDataDelete(index: number): void; // Called to delete data. + onDataChange(index: number): void; // Called to change data. } ``` -具体使用请看 openharmony：[LazyForEach：数据懒加载](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md/) -## 属性（接口）说明 - -### PullToRefresh组件属性 - -| 属性 | 类型 | 释义 | 默认值 | -| :------------------:|:----------------------------------------------------------------------------------:|:---------------------:| :----------------------------: | -| data | Object[] \| undefined | 列表或宫格组件所绑定的数据 | undefined | -| scroller | Scroller | 列表或宫格组件所绑定的Scroller对象 | undefined | -| customList | ```() => void ``` | 自定义主体布局，内部有列表或宫格组件 | undefined | -| refreshConfigurator | PullToRefreshConfigurator | 组件属性配置 | PullToRefreshConfigurator | -| mWidth | Length | 容器宽 | undefined（自适应） | -| mHeight | Length | 容器高 | undefined（自适应） | -| onRefresh | ```() => Promise``` | 下拉刷新回调 | 1秒后结束下拉刷新动画并提示“刷新失败” | -| onLoadMore | ```() => Promise``` | 上拉加载更多回调 | 1秒后结束上拉加载动画 | -| customRefresh | ```() => void ``` | 自定义下拉刷新动画布局 | undefined | -| onAnimPullDown | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 下拉中回调 | undefined | -| onAnimRefreshing | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 刷新中回调 | undefined | -| customLoad | ```() => void``` | 自定义上拉加载动画布局 | undefined | -| onAnimPullUp | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 上拉中回调 | undefined | -| onAnimLoading | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 加载中回调 | undefined | - -### PullToRefreshConfigurator类接口 - -| 接口 | 参数类型 | 释义 | 默认值 | -| :------------------------:| :-------------------------: |:--------------------------:| :--------------: | -| setHasRefresh | boolean | 是否具有下拉刷新功能 | true | -| setHasLoadMore | boolean | 是否具有上拉加载功能 | true | -| setMaxTranslate | number | 可下拉上拉的最大距离 | 100 | -| setSensitivity | number | 下拉上拉灵敏度 | 0.7 | -| setListIsPlacement | boolean | 滑动结束后列表是否归位 | true | -| setAnimDuration | number | 滑动结束后，回弹动画执行时间 | 150 | -| setRefreshHeight | number | 下拉动画高度 | 30 | -| setRefreshColor | string | 下拉动画颜色 | '#999999' | -| setRefreshBackgroundColor | ResourceColor | 下拉动画区域背景色 | 'rgba(0,0,0,0)' | -| setRefreshTextColor | ResourceColor | 下拉加载完毕后提示文本的字体颜色 | '#999999' | -| setRefreshTextSize | number 或 string 或 Resource | 下拉加载完毕后提示文本的字体大小 | 18 | -| setRefreshAnimDuration | number | 下拉动画执行一次的时间，仅在自定义下拉刷新动画时有效 | 1000 | -| setRefreshCompleteTextHoldTime | number | 下拉刷新完毕后, 刷新成功文本停留的时间 | 1000 | -| setLoadImgHeight | number | 上拉动画中图片的高度 | 30 | -| setLoadBackgroundColor | ResourceColor | 上拉动画区域背景色 | 'rgba(0,0,0,0)' | -| setLoadTextColor | ResourceColor | 上拉文本的字体颜色 | '#999999' | -| setLoadTextSize | number 或 string 或 Resource | 上拉文本的字体大小 | 18 | -| setLoadTextPullUp1 | string | 上拉1阶段文本 | '正在上拉刷新...' | -| setLoadTextPullUp2 | string | 上拉2阶段文本 | '放开刷新' | -| setLoadTextLoading | string | 上拉加载更多中时的文本 | '正在玩命加载中...' | - -## 约束与限制 - -在下述版本验证通过： -- DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66) - -## 贡献代码 - -使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/PullToRefresh/issues) -给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/PullToRefresh/pulls) 。 - -## 开源协议 - -本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/PullToRefresh/blob/master/LICENSE) ，请自由地享受和参与开源。 +For details, see [LazyForEach: Lazy Data Loading](https://docs.openharmony.cn/pages/v4.1/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md/). +## Available APIs + +### PullToRefresh Properties + +| Name | Type | Description | Default Value | +| :------------------|:----------------------------------------------------------------------------------|:---------------------| :---------------------------- | +| data | Object[] \| undefined | Data source of the list or grid component. | undefined | +| scroller | Scroller | Scroller object associated with the list or grid component.| undefined | +| customList | `() => void ` | Custom main layout, with a list or grid component. | undefined | +| refreshConfigurator | PullToRefreshConfigurator | Component configuration. | PullToRefreshConfigurator | +| mWidth | Length | Container width. | undefined (adaptive) | +| mHeight | Length | Container height. | undefined (adaptive) | +| onRefresh | `() => Promise` | Callback used to handle the pull-down refresh action. | Finish the pull-down refresh animation after 1s and report "Refresh failed".| +| onLoadMore | `() => Promise` | Callback used to handle the pull-up loading action. | Finish the pull-up loading animation after 1s. | +| customRefresh | `() => void ` | Custom layout for the refresh animation. | undefined | +| onAnimPullDown | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the pull-down animation. | undefined | +| onAnimRefreshing | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the refreshing animation. | undefined | +| customLoad | `() => void` | Custom layout of the pull-up loading animation. | undefined | +| onAnimPullUp | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the pull-up animation. | undefined | +| onAnimLoading | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the loading animation. | undefined | + +### PullToRefreshConfigurator APIs + +| API | Type | Description | Default Value | +| :------------------------| :------------------------- |:--------------------------| :-------------- | +| setHasRefresh | boolean | Sets whether to enable pull-down refresh. | true | +| setHasLoadMore | boolean | Sets whether to enable pull-up loading. | true | +| setMaxTranslate | number | Sets the maximum distance that the component can be pulled up and down. | 100 | +| setSensitivity | number | Sets the sensitivity of the Pull-down and pull-up actions. | 0.7 | +| setListIsPlacement | boolean | Sets whether the list should return to its original position after the pull-up or pull-down action is complete. | true | +| setAnimDuration | number | Sets the duration of the animation for the action. | 150 | +| setRefreshHeight | number | Sets the height of the refresh animation. | 30 | +| setRefreshColor | string | Sets the color of the refresh animation area. | '#999999' | +| setRefreshBackgroundColor | ResourceColor | Sets the background color of the refresh animation area. | 'rgba(0,0,0,0)' | +| setRefreshTextColor | ResourceColor | Sets the color of the text displayed during the refresh action. | '#999999' | +| setRefreshTextSize | number, string, or resource| Sets the size of the text displayed during the refresh action. | 18 | +| setRefreshAnimDuration | number | Sets the duration of the refresh animation, which is valid only when the refresh animation is customized.| 1000 | +| setRefreshCompleteTextHoldTime | number | Sets the duration for which the "refresh complete" text is displayed after the refresh action is finished.| 1000 | +| setLoadImgHeight | number | Sets the height of the loading image used in the pull-up animation. | 30 | +| setLoadBackgroundColor | ResourceColor | Sets the background color of the loading animation area. | 'rgba(0,0,0,0)' | +| setLoadTextColor | ResourceColor | Sets the color of the text displayed during the loading. | '#999999' | +| setLoadTextSize | number, string, or resource| Sets the size of the text displayed during the loading. | 18 | +| setLoadTextPullUp1 | string | Sets the text displayed during the first stage of the pull-up action. | 'Refreshing…' | +| setLoadTextPullUp2 | string | Sets the text displayed during the second stage of the pull-up action. | 'Release to refresh' | +| setLoadTextLoading | string | Sets the text displayed during the loading. | 'Loading...'| + +## Constraints + +This project has been verified in the following version: + +DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66) + +## How to Contribute + +If you find any problem during the use, submit an [Issue](https://gitee.com/openharmony-sig/PullToRefresh/issues) or a [PR](https://gitee.com/openharmony-sig/PullToRefresh/pulls) to us. + +## License + +This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/PullToRefresh/blob/master/LICENSE). diff --git a/README_EN.md b/README_EN.md deleted file mode 100644 index 436523a..0000000 --- a/README_EN.md +++ /dev/null @@ -1,175 +0,0 @@ -# PullToRefresh - -## Introduction - -PullToRefresh is an OpenHarmony UI component which allows users to pull down on a list or a page to trigger a refresh action and pull up to trigger a load action. -You can set built-in animation properties, customize animations, and use **lazyForEarch** data as the data source. - -#### Effect - -Built-in animation effect - -![Refresh](gifs/Refresh_EN.gif)![Refresh](gifs/LoadMore_EN.gif) - -## How to Install - -```shell -ohpm install @ohos/pulltorefresh -``` - -## How to Use - -### Quick Start - -```typescript -import { PullToRefresh } from '@ohos/pulltorefresh' - -// Create a scroller instance. -private scroller: Scroller = new Scroller(); - -PullToRefresh({ - // (Optional) Data source of the list component. - data: this.data, - // (Mandatory) List or grid component in the main layout. - scroller: this.scroller, - // (Mandatory) Custom list or grid view. - customList: () => { - // A UI method decorated by @Builder. - this.getListView(); - }, - // (Optional) Callback used to handle the pull-down refresh action. - onRefresh: () => { - return new Promise((resolve, reject) => { - // Simulate a network request operation. When data is obtained 2 seconds after the network request, inform the component to refresh the list data. - setTimeout(() => { - resolve ('Refresh successful'); - this.data = [...this.dataNumbers]; - }, 2000); - }); - }, - // (Optional) Callback used to handle the pull-up loading action. - onLoadMore: () => { - return new Promise((resolve, reject) => { - // Simulate a network request operation. When data is obtained 2 seconds after the network request, inform the component to update the list data. - setTimeout(() => { - resolve(''); - this.data.push ("Added items" + this.data.length); - }, 2000); - }); - }, - customLoad: null, - customRefresh: null, -}) -``` - -For details about how to set properties and customize animations, see [Example entry](https://gitee.com/openharmony-sig/PullToRefresh/tree/master/entry/src/main/ets/pages). - -### Constraints -- Only the **List**, **Scroll**, **Tabs**, **Grid**, and **WaterFlow** system container components are supported. -- The spring effect and shadow effect of the system container components cannot be set. The **edgeEffect** value must be **EdgeEffect.None**. - -- The pull-up loading action cannot be automatically triggered when the page bottom is reached. - -- The pull-up loading action cannot be triggered when the current screen is not fully occupied. - -- The pull-down refresh action cannot be triggered by code. - -- The callback used to return the gesture end indication is not supported when the pull-down refresh animation ends. - - -### Using LazyForEarch Data as Data Source -**LazyForEach** iterates over provided data sources and creates corresponding components during each iteration. When **LazyForEach** is used in a **Scroll** container, the framework creates components as required within the visible area of the **Scroll** container. When a component is out of the visible area, the framework destroys the component to release memory. - - **LazyForEach** - -```typescript -LazyForEach( - dataSource: IDataSource, // Data source to iterate over. - itemGenerator: (item: any, index?: number) => void, // Create child components. - keyGenerator?: (item: any, index?: number) => string // Create unique keys. -): void -``` -**IDataSource** - -```typescript -interface IDataSource { - totalCount(): number; // Obtain the total number of data items. - getData(index: number): Object; // Obtain the data item that matches the specified index. - registerDataChangeListener(listener: DataChangeListener): void; // Register a data change listener. - unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister a data change listener. -} -``` -**DataChangeListener** -```typescript -interface DataChangeListener { - onDataReloaded(): void; // Called when data is reloaded. - onDataAdded(index: number): void; // Called when data is added. - onDataMoved(from: number, to: number): void; // Called when data is moved. - onDataDeleted(index: number): void; // Called when data is deleted. - onDataChanged(index: number): void; // Called when data is changed. - onDataAdd(index: number): void; // Called to add data. - onDataMove(from: number, to: number): void; // Called to move data. - onDataDelete(index: number): void; // Called to delete data. - onDataChange(index: number): void; // Called to change data. -} -``` -For details, see [LazyForEach: Lazy Data Loading](https://docs.openharmony.cn/pages/v4.1/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md/). -## Available APIs - -### PullToRefresh Properties - -| Name | Type | Description | Default Value | -| :------------------|:----------------------------------------------------------------------------------|:---------------------| :---------------------------- | -| data | Object[] \| undefined | Data source of the list or grid component. | undefined | -| scroller | Scroller | Scroller object associated with the list or grid component.| undefined | -| customList | `() => void ` | Custom main layout, with a list or grid component. | undefined | -| refreshConfigurator | PullToRefreshConfigurator | Component configuration. | PullToRefreshConfigurator | -| mWidth | Length | Container width. | undefined (adaptive) | -| mHeight | Length | Container height. | undefined (adaptive) | -| onRefresh | `() => Promise` | Callback used to handle the pull-down refresh action. | Finish the pull-down refresh animation after 1s and report "Refresh failed".| -| onLoadMore | `() => Promise` | Callback used to handle the pull-up loading action. | Finish the pull-up loading animation after 1s. | -| customRefresh | `() => void ` | Custom layout for the refresh animation. | undefined | -| onAnimPullDown | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the pull-down animation. | undefined | -| onAnimRefreshing | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the refreshing animation. | undefined | -| customLoad | `() => void` | Custom layout of the pull-up loading animation. | undefined | -| onAnimPullUp | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the pull-up animation. | undefined | -| onAnimLoading | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | Callback to be invoked during the loading animation. | undefined | - -### PullToRefreshConfigurator APIs - -| API | Type | Description | Default Value | -| :------------------------| :------------------------- |:--------------------------| :-------------- | -| setHasRefresh | boolean | Sets whether to enable pull-down refresh. | true | -| setHasLoadMore | boolean | Sets whether to enable pull-up loading. | true | -| setMaxTranslate | number | Sets the maximum distance that the component can be pulled up and down. | 100 | -| setSensitivity | number | Sets the sensitivity of the Pull-down and pull-up actions. | 0.7 | -| setListIsPlacement | boolean | Sets whether the list should return to its original position after the pull-up or pull-down action is complete. | true | -| setAnimDuration | number | Sets the duration of the animation for the action. | 150 | -| setRefreshHeight | number | Sets the height of the refresh animation. | 30 | -| setRefreshColor | string | Sets the color of the refresh animation area. | '#999999' | -| setRefreshBackgroundColor | ResourceColor | Sets the background color of the refresh animation area. | 'rgba(0,0,0,0)' | -| setRefreshTextColor | ResourceColor | Sets the color of the text displayed during the refresh action. | '#999999' | -| setRefreshTextSize | number, string, or resource| Sets the size of the text displayed during the refresh action. | 18 | -| setRefreshAnimDuration | number | Sets the duration of the refresh animation, which is valid only when the refresh animation is customized.| 1000 | -| setRefreshCompleteTextHoldTime | number | Sets the duration for which the "refresh complete" text is displayed after the refresh action is finished.| 1000 | -| setLoadImgHeight | number | Sets the height of the loading image used in the pull-up animation. | 30 | -| setLoadBackgroundColor | ResourceColor | Sets the background color of the loading animation area. | 'rgba(0,0,0,0)' | -| setLoadTextColor | ResourceColor | Sets the color of the text displayed during the loading. | '#999999' | -| setLoadTextSize | number, string, or resource| Sets the size of the text displayed during the loading. | 18 | -| setLoadTextPullUp1 | string | Sets the text displayed during the first stage of the pull-up action. | 'Refreshing…' | -| setLoadTextPullUp2 | string | Sets the text displayed during the second stage of the pull-up action. | 'Release to refresh' | -| setLoadTextLoading | string | Sets the text displayed during the loading. | 'Loading...'| - -## Constraints - -This project has been verified in the following version: - -DevEco Studio NEXT Developer Beta3: (5.0.3.530), SDK: API12 (5.0.0.35(SP3)) - -## How to Contribute - -If you find any problem during the use, submit an [Issue](https://gitee.com/openharmony-sig/PullToRefresh/issues) or a [PR](https://gitee.com/openharmony-sig/PullToRefresh/pulls) to us. - -## License - -This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/PullToRefresh/blob/master/LICENSE). diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..11ee016 --- /dev/null +++ b/README_zh.md @@ -0,0 +1,171 @@ +# PullToRefresh + +## 简介 + +> PullToRefresh是一款OpenHarmony环境下可用的下拉刷新、上拉加载组件。 +> 支持设置内置动画的各种属性，支持设置自定义动画，支持lazyForEarch的数据作为数据源。 + +#### 效果展示： + +内置动画效果 + +![Refresh](gifs/Refresh.gif)![Refresh](gifs/LoadMore.gif) + +## 下载安装 + +```shell +ohpm install @ohos/pulltorefresh +``` + +## 使用说明 + +### 快速使用 + +```typescript +import { PullToRefresh } from '@ohos/pulltorefresh' + +// 需绑定列表或宫格组件 +private scroller: Scroller = new Scroller(); + +PullToRefresh({ +// 可选项，列表组件所绑定的数据 +data: this.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, +}) +``` + +设置属性示例和设置自定义动画示例请看[示例entry](https://gitee.com/openharmony-sig/PullToRefresh/tree/master/entry/src/main/ets/pages) + +### 使用限制 +1、目前只支持List、Scroll、Tabs、Grid和WaterFlow系统容器组件； + +2、暂不支持设置系统容器组件的弹簧效果和阴影效果，使用时需要将系统组件edgeEffect属性的值设置为(EdgeEffect.None)； + +3、暂不支持页面触底时自动触发上拉加载功能； + +4、暂不支持在页面数据不满一屏时触发上拉加载功能； + +5、暂不支持通过代码的方式去触发下拉刷新功能； + +6、暂不支持在下拉刷新动画结束时提供手势结束的回调； + +### 支持lazyForEarch的数据作为数据源 + LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用 + **接口描述：** +```typescript +LazyForEach( + dataSource: IDataSource, // 需要进行数据迭代的数据源 + itemGenerator: (item: any, index?: number) => void, // 子组件生成函数 + keyGenerator?: (item: any, index?: number) => string // 键值生成函数 +): void +``` +**IDataSource类型说明** +```typescript +interface IDataSource { + totalCount(): number; // 获得数据总数 + getData(index: number): Object; // 获取索引值对应的数据 + registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器 + unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器 +} +``` +**DataChangeListener类型说明** +```typescript +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：数据懒加载](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md/) +## 属性（接口）说明 + +### PullToRefresh组件属性 + +| 属性 | 类型 | 释义 | 默认值 | +| :------------------:|:----------------------------------------------------------------------------------:|:---------------------:| :----------------------------: | +| data | Object[] \| undefined | 列表或宫格组件所绑定的数据 | undefined | +| scroller | Scroller | 列表或宫格组件所绑定的Scroller对象 | undefined | +| customList | ```() => void ``` | 自定义主体布局，内部有列表或宫格组件 | undefined | +| refreshConfigurator | PullToRefreshConfigurator | 组件属性配置 | PullToRefreshConfigurator | +| mWidth | Length | 容器宽 | undefined（自适应） | +| mHeight | Length | 容器高 | undefined（自适应） | +| onRefresh | ```() => Promise``` | 下拉刷新回调 | 1秒后结束下拉刷新动画并提示“刷新失败” | +| onLoadMore | ```() => Promise``` | 上拉加载更多回调 | 1秒后结束上拉加载动画 | +| customRefresh | ```() => void ``` | 自定义下拉刷新动画布局 | undefined | +| onAnimPullDown | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 下拉中回调 | undefined | +| onAnimRefreshing | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 刷新中回调 | undefined | +| customLoad | ```() => void``` | 自定义上拉加载动画布局 | undefined | +| onAnimPullUp | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 上拉中回调 | undefined | +| onAnimLoading | ```(value?: number, width?: number, height?: number) => void \| undefined ``` | 加载中回调 | undefined | + +### PullToRefreshConfigurator类接口 + +| 接口 | 参数类型 | 释义 | 默认值 | +| :------------------------:| :-------------------------: |:--------------------------:| :--------------: | +| setHasRefresh | boolean | 是否具有下拉刷新功能 | true | +| setHasLoadMore | boolean | 是否具有上拉加载功能 | true | +| setMaxTranslate | number | 可下拉上拉的最大距离 | 100 | +| setSensitivity | number | 下拉上拉灵敏度 | 0.7 | +| setListIsPlacement | boolean | 滑动结束后列表是否归位 | true | +| setAnimDuration | number | 滑动结束后，回弹动画执行时间 | 150 | +| setRefreshHeight | number | 下拉动画高度 | 30 | +| setRefreshColor | string | 下拉动画颜色 | '#999999' | +| setRefreshBackgroundColor | ResourceColor | 下拉动画区域背景色 | 'rgba(0,0,0,0)' | +| setRefreshTextColor | ResourceColor | 下拉加载完毕后提示文本的字体颜色 | '#999999' | +| setRefreshTextSize | number 或 string 或 Resource | 下拉加载完毕后提示文本的字体大小 | 18 | +| setRefreshAnimDuration | number | 下拉动画执行一次的时间，仅在自定义下拉刷新动画时有效 | 1000 | +| setRefreshCompleteTextHoldTime | number | 下拉刷新完毕后, 刷新成功文本停留的时间 | 1000 | +| setLoadImgHeight | number | 上拉动画中图片的高度 | 30 | +| setLoadBackgroundColor | ResourceColor | 上拉动画区域背景色 | 'rgba(0,0,0,0)' | +| setLoadTextColor | ResourceColor | 上拉文本的字体颜色 | '#999999' | +| setLoadTextSize | number 或 string 或 Resource | 上拉文本的字体大小 | 18 | +| setLoadTextPullUp1 | string | 上拉1阶段文本 | '正在上拉刷新...' | +| setLoadTextPullUp2 | string | 上拉2阶段文本 | '放开刷新' | +| setLoadTextLoading | string | 上拉加载更多中时的文本 | '正在玩命加载中...' | + +## 约束与限制 + +在下述版本验证通过： +- `DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)` + +## 贡献代码 + +使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/PullToRefresh/issues)给组件，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-sig/PullToRefresh/pulls) 共建。 + +## 开源协议 + +本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/PullToRefresh/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/changelog.md b/changelog.md index 363fef9..2ae592e 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,8 @@ +## 2.1.1-rc.0 + +1、添加中英文README.md修改以及demo国际化处理 +2、loadTextPullUp1、loadTextPullUp2、loadTextLoading、loadText等接口类型修改为 "string | Resource" + ## 2.1.0 1、发布2.1.0正式版本 diff --git a/entry/oh-package.json5 b/entry/oh-package.json5 index 736cf27..a302e64 100644 --- a/entry/oh-package.json5 +++ b/entry/oh-package.json5 @@ -4,7 +4,7 @@ "name": "entry", "description": "example description", "repository": {}, - "version": "2.1.0", + "version": "2.1.1-rc.0", "dependencies": { "@ohos/pulltorefresh": "file:../library" } diff --git a/entry/src/main/ets/entryability/EntryAbility.ts b/entry/src/main/ets/entryability/EntryAbility.ts index a96b8be..dbc6c0e 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ts +++ b/entry/src/main/ets/entryability/EntryAbility.ts @@ -1,3 +1,17 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ import UIAbility from '@ohos.app.ability.UIAbility'; import hilog from '@ohos.hilog'; import window from '@ohos.window'; diff --git a/entry/src/main/ets/pages/customConfig.ets b/entry/src/main/ets/pages/customConfig.ets index 9013587..a4df307 100644 --- a/entry/src/main/ets/pages/customConfig.ets +++ b/entry/src/main/ets/pages/customConfig.ets @@ -17,12 +17,15 @@ import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh' @Entry @ComponentV2 struct Index { - private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; - private dataStrings: string[] = - ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; - @Local data: string[] = this.dataStrings; + private dataNumbers:Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + private dataStrings: Array = + [$r("app.string.MyComments"), $r("app.string.RelatedToMe"), $r("app.string.PersonalCenter1"), $r("app.string.PersonalCenter2"), $r("app.string.PersonalCenter3"), $r("app.string.MyReleases"), $r("app.string.Settings"), $r("app.string.LogOut")]; + @Local data: Array = this.dataStrings; private scroller: Scroller = new Scroller(); private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator(); + private getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } aboutToAppear() { // 设置属性 @@ -43,9 +46,9 @@ struct Index { .setLoadBackgroundColor('#ffbbfaf5')// 上拉动画区域背景色 .setLoadTextColor('blue')// 上拉文本的字体颜色 .setLoadTextSize(25)// 上拉文本的字体大小 - .setLoadTextPullUp1('请继续上拉...')// 上拉1阶段文本 - .setLoadTextPullUp2('释放即可刷新')// 上拉2阶段文本 - .setLoadTextLoading('加载中...') // 上拉加载更多中时的文本 + .setLoadTextPullUp1(this.getResourceString($r("app.string.Please_continue_pull_up")))// 上拉1阶段文本 + .setLoadTextPullUp2(this.getResourceString($r("app.string.Release_refresh")))// 上拉2阶段文本 + .setLoadTextLoading(this.getResourceString($r("app.string.Loading"))) // 上拉加载更多中时的文本 .setRefreshCompleteTextHoldTime(500) //上拉刷新后停留的时间, 默认一秒, 建议设置500 } @@ -72,7 +75,7 @@ struct Index { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { - resolve('刷新成功'); + resolve(this.getResourceString($r("app.string.RefreshSuccessful"))); this.data = [...this.dataNumbers]; }, 2000); }); @@ -83,7 +86,7 @@ struct Index { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { resolve(''); - this.data.push("增加的条目" + this.data.length); + this.data.push(`${this.getResourceString($r("app.string.AddedEntry"))} ${ this.data.length}`); }, 2000); }); }, diff --git a/entry/src/main/ets/pages/customRefreshAnim.ets b/entry/src/main/ets/pages/customRefreshAnim.ets index f1ebaa9..d2d20ca 100644 --- a/entry/src/main/ets/pages/customRefreshAnim.ets +++ b/entry/src/main/ets/pages/customRefreshAnim.ets @@ -20,16 +20,18 @@ const pointJitterAmplitude = 10; @Entry @ComponentV2 struct Index { - private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; - private dataStrings: string[] = - ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; - @Local data: string[] = this.dataStrings; + private dataNumbers: Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + private dataStrings: Array = [$r("app.string.MyComments"), $r("app.string.RelatedToMe"), $r("app.string.PersonalCenter1"), $r("app.string.PersonalCenter2"), $r("app.string.PersonalCenter3"), $r("app.string.MyReleases"), $r("app.string.Settings"), $r("app.string.LogOut")]; + @Local data: Array = this.dataStrings; private scroller: Scroller = new Scroller(); private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator(); private canvasSetting: RenderingContextSettings = new RenderingContextSettings(true); private canvasRefresh: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvasSetting); private value1: number[] = []; private value2: number[] = []; + private getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } aboutToAppear() { // 设置属性 @@ -67,7 +69,7 @@ struct Index { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { resolve(''); - this.data.push("增加的条目" + this.data.length); + this.data.push(`${this.getResourceString($r("app.string.AddedEntry"))} ${ this.data.length}`); }, 2000); }); }, diff --git a/entry/src/main/ets/pages/fullScreen.ets b/entry/src/main/ets/pages/fullScreen.ets index 18e4a88..b7c7ed4 100644 --- a/entry/src/main/ets/pages/fullScreen.ets +++ b/entry/src/main/ets/pages/fullScreen.ets @@ -17,12 +17,14 @@ import { PullToRefresh } from '@ohos/pulltorefresh' @Entry @ComponentV2 struct Index { - private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; - private dataStrings: string[] = - ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; - @Local data: string[] = this.dataStrings; + private dataNumbers: Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + private dataStrings: Array = [$r("app.string.MyComments"), $r("app.string.RelatedToMe"), $r("app.string.PersonalCenter1"), $r("app.string.PersonalCenter2"), $r("app.string.PersonalCenter3"), $r("app.string.MyReleases"), $r("app.string.Settings"), $r("app.string.LogOut")]; + @Local data: Array = this.dataStrings; // 需绑定列表或宫格组件 private scroller: Scroller = new Scroller(); + private getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } build() { Column() { @@ -52,7 +54,7 @@ struct Index { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { resolve(''); - this.data.push("增加的条目" + this.data.length); + this.data.push(`${this.getResourceString($r("app.string.AddedEntry"))} ${ this.data.length}`); }, 2000); }); }, diff --git a/entry/src/main/ets/pages/index.ets b/entry/src/main/ets/pages/index.ets index 24b8a3c..160bbfd 100644 --- a/entry/src/main/ets/pages/index.ets +++ b/entry/src/main/ets/pages/index.ets @@ -20,31 +20,31 @@ struct Index { build() { Row() { Column() { - Button('快速使用') + Button($r("app.string.quickStart")) .onClick(() => { router.push({ url: 'pages/quickStart' }) }) - Button('设置属性') + Button($r("app.string.customConfig")) .margin({ top: 10 }) .onClick(() => { router.push({ url: 'pages/customConfig' }) }) - Button('自定义下拉动画') + Button($r("app.string.customRefreshAnim")) .margin({ top: 10 }) .onClick(() => { router.push({ url: 'pages/customRefreshAnim' }) }) - Button('满屏下展示页面') + Button($r("app.string.fullScreen")) .margin({ top: 10 }) .onClick(() => { router.push({ url: 'pages/fullScreen' }) }) - Button('Tab配合PullToRefresh') + Button($r("app.string.tabsTestPage")) .margin({ top: 10 }) .onClick(() => { router.push({ url: 'pages/tabsTestPage' }) }) - Button('使用lazyForEach展示页面') + Button($r("app.string.lazyForEachGuide")) .margin({ top: 10 }) .onClick(() => { router.push({ url: 'pages/lazyForEachGuide' }) diff --git a/entry/src/main/ets/pages/interface.test.ets b/entry/src/main/ets/pages/interface.test.ets index 181b854..9fe7235 100644 --- a/entry/src/main/ets/pages/interface.test.ets +++ b/entry/src/main/ets/pages/interface.test.ets @@ -114,6 +114,10 @@ struct MyComponent { private scroller: Scroller = new Scroller(); private timer: null | number = null; + private getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } + aboutToAppear() { for (let i = 1; i <= 20; i++) { this.data.pushData(`Hello ${i}`); @@ -136,7 +140,7 @@ struct MyComponent { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 this.timer = setTimeout(() => { - resolve('刷新成功'); + resolve(this.getResourceString($r("app.string.RefreshSuccessful"))); console.log(' 刷新成功'); this.data.addData(0, 'ADD HEAD 0'); }, 2000); diff --git a/entry/src/main/ets/pages/lazyForEachGuide.ets b/entry/src/main/ets/pages/lazyForEachGuide.ets index 515b032..71da16b 100644 --- a/entry/src/main/ets/pages/lazyForEachGuide.ets +++ b/entry/src/main/ets/pages/lazyForEachGuide.ets @@ -110,6 +110,9 @@ struct MyComponent { // 需绑定列表或宫格组件 private scroller: Scroller = new Scroller(); private timer: null | number = null; + private getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } aboutToAppear() { for (let i = 1; i <= 20; i++) { @@ -132,7 +135,7 @@ struct MyComponent { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 this.timer = setTimeout(() => { - resolve('刷新成功'); + resolve(this.getResourceString($r("app.string.RefreshSuccessful"))); console.log(' 刷新成功'); this.data.addData(0, 'ADD HEAD 0'); }, 2000); diff --git a/entry/src/main/ets/pages/quickStart.ets b/entry/src/main/ets/pages/quickStart.ets index e2cd124..4dbc9ef 100644 --- a/entry/src/main/ets/pages/quickStart.ets +++ b/entry/src/main/ets/pages/quickStart.ets @@ -17,11 +17,14 @@ import { PullToRefresh } from '@ohos/pulltorefresh' @Entry @ComponentV2 struct Index { - private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; - private dataStrings: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; - @Local data: string[] = this.dataStrings; + private dataNumbers: Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + private dataStrings: Array = [$r("app.string.MyComments"), $r("app.string.RelatedToMe"), $r("app.string.PersonalCenter1"), $r("app.string.PersonalCenter2"), $r("app.string.PersonalCenter3"), $r("app.string.MyReleases"), $r("app.string.Settings"), $r("app.string.LogOut")]; + @Local data: Array = this.dataStrings; // 需绑定列表或宫格组件 private scroller: Scroller = new Scroller(); + private getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } build() { Column() { @@ -40,7 +43,7 @@ struct Index { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { - resolve('刷新成功'); + resolve(this.getResourceString($r("app.string.RefreshSuccessful"))); this.data = [...this.dataNumbers]; }, 2000); }); @@ -51,7 +54,7 @@ struct Index { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { resolve(''); - this.data.push("增加的条目" + this.data.length); + this.data.push(`${this.getResourceString($r("app.string.AddedEntry"))} ${ this.data.length}`); }, 2000); }); }, diff --git a/entry/src/main/ets/pages/tabsTestPage.ets b/entry/src/main/ets/pages/tabsTestPage.ets index d38e974..1280807 100644 --- a/entry/src/main/ets/pages/tabsTestPage.ets +++ b/entry/src/main/ets/pages/tabsTestPage.ets @@ -74,11 +74,14 @@ struct TabsExample { @ComponentV2 struct PullToRefreshDemo { - private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; - private dataStrings: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; - @Local data: string[] = this.dataStrings; + private dataNumbers: Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + private dataStrings: Array = [$r("app.string.MyComments"), $r("app.string.RelatedToMe"), $r("app.string.PersonalCenter1"), $r("app.string.PersonalCenter2"), $r("app.string.PersonalCenter3"), $r("app.string.MyReleases"), $r("app.string.Settings"), $r("app.string.LogOut")]; + @Local data: Array = this.dataStrings; // 需绑定列表或宫格组件 private scroller: Scroller = new Scroller(); + private getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } build() { Column() { @@ -97,7 +100,7 @@ struct PullToRefreshDemo { return new Promise((resolve, reject) => { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { - resolve('刷新成功'); + resolve(this.getResourceString($r("app.string.RefreshSuccessful"))); this.data = [...this.dataNumbers]; }, 2000); }); @@ -108,7 +111,7 @@ struct PullToRefreshDemo { // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据 setTimeout(() => { resolve(''); - this.data.push("增加的条目" + this.data.length) + this.data.push(`${this.getResourceString($r("app.string.AddedEntry"))} ${ this.data.length}`) }, 2000); }); }, diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 490210a..8882d8d 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -11,6 +11,78 @@ { "name": "MainAbility_label", "value": "label" + }, + { + "name": "quickStart", + "value": "quickStart" + }, + { + "name": "customConfig", + "value": "setProperties" + }, + { + "name": "customRefreshAnim", + "value": "customRefreshAnim" + }, + { + "name": "fullScreen", + "value": "useFullScreen" + }, + { + "name": "tabsTestPage", + "value": "tabsTestPage" + }, + { + "name": "lazyForEachGuide", + "value": "lazyForEachGuide" + }, + { + "name": "PersonalCenter1", + "value": "Personal center 1" + }, + { + "name": "PersonalCenter2", + "value": "Personal center 2" + }, + { + "name": "PersonalCenter3", + "value": "Personal center 3" + }, + { + "name": "MyComments", + "value": "My Comments" + }, + { + "name": "MyReleases", + "value": "My Releases" + }, + { + "name": "RelatedToMe", + "value": "Related to Me" + }, + { + "name": "Settings", + "value": "Settings" + }, + { + "name": "AddedEntry", + "value": "Added entry" + }, + { + "name": "RefreshSuccessful", + "value": "Refresh successful." + }, + { + "name": "Please_continue_pull_up", + "value": "Please continue to pull up..." + }, + { + "name": "Release_refresh", + "value": "Release to refresh" + }, + { + "name": "Loading", + "value": "Loading..." } ] } \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json new file mode 100644 index 0000000..ef297e2 --- /dev/null +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -0,0 +1,76 @@ +{ + "string": [ + { + "name": "quickStart", + "value": "快速使用" + }, + { + "name": "customConfig", + "value": "设置属性" + }, + { + "name": "customRefreshAnim", + "value": "自定义下拉动画" + }, + { + "name": "fullScreen", + "value": "满屏下展示页面" + }, + { + "name": "tabsTestPage", + "value": "Tab配合PullToRefresh" + }, + { + "name": "lazyForEachGuide", + "value": "使用lazyForEach展示页面" + }, + { + "name": "PersonalCenter1", + "value": "个人中心1" + }, + { + "name": "PersonalCenter2", + "value": "个人中心2" + }, + { + "name": "PersonalCenter3", + "value": "个人中心3" + }, + { + "name": "MyComments", + "value": "我的评论" + }, + { + "name": "MyReleases", + "value": "我的发布" + }, + { + "name": "RelatedToMe", + "value": "与我相关" + }, + { + "name": "Settings", + "value": "设置" + }, + { + "name": "AddedEntry", + "value": "增加的条目" + }, + { + "name": "RefreshSuccessful", + "value": "刷新成功" + }, + { + "name": "Please_continue_pull_up", + "value": "请继续上拉..." + }, + { + "name": "Release_refresh", + "value": "释放即可刷新" + }, + { + "name": "Loading", + "value": "加载中..." + } + ] +} \ No newline at end of file diff --git a/library/oh-package.json5 b/library/oh-package.json5 index 9bea51c..eac17b8 100644 --- a/library/oh-package.json5 +++ b/library/oh-package.json5 @@ -14,7 +14,7 @@ "main": "index.ets", "repository": "https://gitee.com/openharmony-sig/PullToRefresh", "type": "module", - "version": "2.1.0", + "version": "2.1.1-rc.0", "dependencies": {}, "tags": [ "UI" diff --git a/library/src/main/ets/components/PullToRefresh/PullToRefresh.ets b/library/src/main/ets/components/PullToRefresh/PullToRefresh.ets index 4d0284e..ec93f9f 100644 --- a/library/src/main/ets/components/PullToRefresh/PullToRefresh.ets +++ b/library/src/main/ets/components/PullToRefresh/PullToRefresh.ets @@ -60,7 +60,7 @@ export struct PullToRefresh { @Local private trYBottom?: number = 0; @Local private state?: number = IS_FREE; @Local private refreshText?: string = ''; - @Local private loadText?: string = ''; + @Local private loadText?: string | Resource = ''; @Local private angle1?: number | string = 0; @Local private angle2?: number | string = 0; private mWidthNumber?: number = 0; @@ -229,6 +229,7 @@ export struct PullToRefresh { .height(this.refreshConfigurator !== undefined ? this.refreshConfigurator.getLoadImgHeight() : 0) Text(this.loadText) + .constraintSize({maxWidth: this.mWidth}) .height('100%') .textAlign(TextAlign.Center) .margin({ left: 8 }) diff --git a/library/src/main/ets/components/PullToRefresh/PullToRefreshConfigurator.ets b/library/src/main/ets/components/PullToRefresh/PullToRefreshConfigurator.ets index f993a8a..57b5af9 100644 --- a/library/src/main/ets/components/PullToRefresh/PullToRefreshConfigurator.ets +++ b/library/src/main/ets/components/PullToRefresh/PullToRefreshConfigurator.ets @@ -30,9 +30,9 @@ export class PullToRefreshConfigurator { private loadBackgroundColor?: ResourceColor = 'rgba(0,0,0,0)'; // 上拉动画区域背景色 private loadTextColor?: ResourceColor = '#999999'; // 上拉文本的字体颜色 private loadTextSize?: number | string | Resource = 18; // 上拉文本的字体大小 - private loadTextPullUp1?: string = '正在上拉刷新...'; // 上拉1阶段文本 - private loadTextPullUp2?: string = '放开刷新'; // 上拉2阶段文本 - private loadTextLoading?: string = '正在玩命加载中...'; // 上拉加载更多中时的文本 + private loadTextPullUp1?: string | Resource = $r("app.string.Refreshing"); // 上拉1阶段文本 + private loadTextPullUp2?: string | Resource = $r("app.string.ReleaseToRefresh"); // 上拉2阶段文本 + private loadTextLoading?: string | Resource = $r("app.string.Loading"); // 上拉加载更多中时的文本 setHasRefresh(hasRefresh: boolean) { this.hasRefresh = hasRefresh; @@ -203,7 +203,7 @@ export class PullToRefreshConfigurator { return 0; } - setLoadTextPullUp1(loadTextPullUp1: string) { + setLoadTextPullUp1(loadTextPullUp1: string | Resource) { this.loadTextPullUp1 = loadTextPullUp1; return this; } @@ -212,7 +212,7 @@ export class PullToRefreshConfigurator { return this.loadTextPullUp1; } - setLoadTextPullUp2(loadTextPullUp2: string) { + setLoadTextPullUp2(loadTextPullUp2: string | Resource) { this.loadTextPullUp2 = loadTextPullUp2; return this; } @@ -221,12 +221,12 @@ export class PullToRefreshConfigurator { return this.loadTextPullUp2; } - setLoadTextLoading(loadTextLoading: string) { + setLoadTextLoading(loadTextLoading: string | Resource) { this.loadTextLoading = loadTextLoading; return this; } - getLoadTextLoading(): string { + getLoadTextLoading(): string | Resource { return this.loadTextLoading !== undefined ? this.loadTextLoading : ""; } } \ No newline at end of file diff --git a/library/src/main/resources/base/element/string.json b/library/src/main/resources/base/element/string.json index 1e76de0..8495bf5 100644 --- a/library/src/main/resources/base/element/string.json +++ b/library/src/main/resources/base/element/string.json @@ -3,6 +3,26 @@ { "name": "page_show", "value": "page from npm package" + }, + { + "name": "RefreshSuccessful", + "value": "Refresh successful." + }, + { + "name": "LogOut", + "value": "Log Out" + }, + { + "name": "Refreshing", + "value": "Refreshing..." + }, + { + "name": "ReleaseToRefresh", + "value": "Release to refresh" + }, + { + "name": "Loading", + "value": "Loading..." } ] } diff --git a/library/src/main/resources/zh_CN/element/string.json b/library/src/main/resources/zh_CN/element/string.json new file mode 100644 index 0000000..c07cd09 --- /dev/null +++ b/library/src/main/resources/zh_CN/element/string.json @@ -0,0 +1,24 @@ +{ + "string": [ + { + "name": "RefreshSuccessful", + "value": "刷新成功" + }, + { + "name": "LogOut", + "value": "退出登录" + }, + { + "name": "Refreshing", + "value": "正在上拉刷新..." + }, + { + "name": "ReleaseToRefresh", + "value": "放开刷新" + }, + { + "name": "Loading", + "value": "正在玩命加载中..." + } + ] +} \ No newline at end of file diff --git a/oh-package.json5 b/oh-package.json5 index 48d4781..500f7e4 100644 --- a/oh-package.json5 +++ b/oh-package.json5 @@ -6,7 +6,6 @@ "name": "pulltorefresh", "description": "example description", "repository": {}, - "version": "2.1.0", + "version": "2.1.1-rc.0", "dependencies": {}, - "modelVersion": "" -} +} \ No newline at end of file -- Gitee