# RefreshLoadMoreComponentJS

**Repository Path**: openharmony-tpc/RefreshLoadMoreComponentJS

## Basic Information

- **Project Name**: RefreshLoadMoreComponentJS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-09-17
- **Last Updated**: 2025-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 🚨 **重要提示 | IMPORTANT**
>
> **⚠️ 此代码仓已归档。新地址请访问 [RefreshLoadMoreComponentJS](https://gitcode.com/openharmony-tpc/RefreshLoadMoreComponentJS)。| ⚠️ This repository has been archived. For the new address, please visit [RefreshLoadMoreComponentJS](https://gitcode.com/openharmony-tpc/RefreshLoadMoreComponentJS).**
>
---
>
# RefreshLoadMoreComponentJS

这是一个自定义下拉刷新，上拉加载更多组件

组件分三部分，下拉刷新布局，内容布局，上拉加载更多布局，三种布局都可供开发者自定义。

## 效果图
<img src="screenshots/screenshots1.gif"/><img src="screenshots/screenshots2.gif"/>

## 如何使用

在hml中写布局

```html
<element name="refreshLoadMoreComponent" src="../../common/component/refreshloadmorecomp/refreshLoadMoreComponent.hml">
</element>
<div >
    <refreshLoadMoreComponent @refresh="onRefresh">
        <div slot="header">
            <!--这里可以放自定义的下拉布局-->
            <!--如果不写就会使用组件默认样式-->
        </div>
        <div slot="content">
            <!--这里可以放自定义的内容显示布局-->
             <list style="background-color : blueviolet;
                          divider-color : aliceblue; divider-height : 5px;"divider="true"
                  scrolleffect="no">
                <list-item for="{{ list }}" style="height : 50px;">
                    <text>{{ $item }}</text>
                </list-item>
            </list>
        </div>
        <div slot="footer">
            <!--这里可以放自定义的加载更多布局-->
            <!--如果不写就会使用组件默认样式-->
        </div>
    </refreshLoadMoreComponent>
</div>
```

在js中写下拉刷新加载数据的逻辑

```js
export default {
    data: {
        list: [],
    },
    onInit() {
        for (var index = 0; index < 20; index++) {
            this.list.push("原始数据：：" + index)
        }
    },
    // 下拉刷新回调
    onRefresh(e) {
        console.log(TAG + " onRefresh()")
        setTimeout(() => {
            this.list.length = 0
            for (var index = 0; index < 22; index++) {
                this.list.push("第" + count + "更新数据：：" + index)
            }
            //用户通知组件下拉加载数据成功
            //这里是必须写的，不然会导致下拉框一直不会自动上滑消失
            e.detail.resolveFunc()
        }, 2000)
    }
}
```

自定义时，需要自定义哪个布局，就使用哪个slot，slot="header"下拉刷新布局，，slot="content"内容布局或者slot="footer"上拉加载布局

注意需写上组件的@refresh="onRefresh"，定义刷新逻辑方法后，且调用e.detail.resolveFunc()，通知组件往回收下拉刷新布局

如需使用上拉加载更多，需添加组件的@load-More="onLoadMore"事件方法

```html
<element name="refreshLoadMoreComponent" src="../../common/component/refreshloadmorecomp/refreshLoadMoreComponent.hml">
</element>
<div >
    <refreshLoadMoreComponent id="refreshLoadMoreComponent" @refresh="onRefresh" @load-More="onLoadMore" @refresh-State="onRefreshState">
...
    </refreshLoadMoreComponent>
</div>
```

js中定义onLoadMore()回调方法

```js
onLoadMore(e) {
    console.log(TAG + " onLoadMore()")
    //模拟耗时操作
    setTimeout(() => {
        if (this.list.length > 25) {
            e.detail.resolveFunc()
            this.$child("refreshLoadMoreComponent").isShowLoadMoreViewFunc(false);
            return;
        }
        this.list.push("加载数据：：" + LoadCount)
        LoadCount++
        e.detail.resolveFunc()
    }, 1000)
},
```

同样在回调后，都需要调用e.detail.resolveFunc()，通知回组件



## 属性事件方法

属性：

```js
header-move-offset 下拉刷新布局滑动距离
```

事件：

```js
@refresh 下拉刷新回调
```


```js
@load-More 上拉加载更多回调
```


```js
@refresh-State 下拉刷新状态
```

该方法可用于自定义下拉刷新布局时，用于对下拉状态的进行不同的逻辑显示，可以通过e.detail.state可以获取状态刷新状态

|     refreshing     |  刷新中  |
| :----------------: | :------: |
|    refreshDrag     |  拖拽中  |
| refreshDragRelease | 拖拽释放 |

方法：


```js
isShowLoadMoreViewFunc(boolean) 控制是否显示上拉加载更多布局 true->显示，false->不显示
```



## 运行要求

SDK 6+



## LICENSE

```
Copyright (c) 2021 hongzhengong
Image3DJS is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
            http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details.
```