# lazy-data

**Repository Path**: gukeming/lazy-data

## Basic Information

- **Project Name**: lazy-data
- **Description**: 轻松处理HarmonyOS-LazyForEach，优化长列表渲染性能
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-05-08
- **Last Updated**: 2024-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @pie/lazy-data

> 轻松处理数据懒加载

## 理念

HarmonyOS渲染长列表时，推荐使用数据懒加载方式，而数据懒加载需要开发者自行实现IDataSource接口。本库实现了IDataSource基础接口，并进一步封装实现了开箱即用的对数据源的各种增删查改的操作函数，为开发者带来便利。

## 安装

```bash
ohpm install @pie/lazy-data
```

对于其他安装方式, 请参考 [这篇文章](https://ohpm.openharmony.cn/#/cn/help/downloadandinstall).

## 使用

### 引入LazyData

```typescript
import { LazyData } from '@pie/lazy-data';
```

### 实例化LazyData

要实例话LazyData，需要传入一个泛型

```
@Component
export struct Comp {
  @State dataSource: LazyData<CustomType> = new LazyData();
  // Other code...
}
```

| 函数名          | 函数签名                                                                          | 用途                                  |
|--------------|-------------------------------------------------------------------------------|-------------------------------------|
| setData      | setData(src: T[]): void                                                       | 设置懒数据源                              |
| getDataIndex | getDataIndex(predicates: (el: T, i: number, arr: T[]) => boolean): number     | 根据给定过滤条件查找第一个符合条件的元素下标              |
| getDataIndex | getDataIndex(searchEl: T): number                                             | 查找指定元素在懒数据源中的下标                     |
| pushData     | pushData(data: T): void                                                       | 向懒数据源末尾添加一个元素                       |
| deleteData   | deleteData(obj: T): void                                                      | 删除指定懒数据                             |
| deleteData   | deleteData(index: number): void                                               | 删除给定下标的懒数据                          |
| insertData   | insertData(data: T, index: number = 0): void                                  | 向懒数据源中插入一个元素，若不给定index，则添加到懒数据源的最前端 |
| popData      | popData(): T                                                                  | 删除懒数据源末尾的元素，返回被删除的元素                |
| shiftData    | shiftData(): T                                                                | 删除懒数据源的首个元素，返回被删除的元素                |
| modifyData   | modifyData(index: number, newData: T): void                                   | 修改给定下标的元素                           |
| modifyData   | modifyData(predicates: T, newData: T): voi                                    | 修改指定元素为新元素                          |
| moveData     | moveData(from: number, to: number): void                                      | 将元素从from下标处移动至to下标处                 |
| searchData   | searchData(predicates: (value: T, index: number, array: T[]) => boolean): T[] | 从懒数据源中搜索符合条件的数据                     |
| totalCount   | totalCount(): number                                                          | 获取懒数据总数                             |
| getData      | getData(index: number): T                                                     | 获取指定下标处的懒数据                         |

### 示例

```
import { LazyData } from '@pie/lazy-data';

@Entry
@Preview
@Component
struct Index {
  @State message: string = 'Hello World';
  @State src: LazyData<string> = new LazyData();

  build() {
    Row() {
      Column() {
        List() {
          LazyForEach(this.src, (el: string) => {
            ListItem() {
              Row({ space: 16 }) {
                Image($r('app.media.startIcon'))
                  .width(36)
                Text(el)
              }
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .onClick(() => {
              this.src.deleteData(el)
            })
          }, (el: string, i) => el + i)
        }
        .width('100%')
        .height('80%')

        Row() {
          Button('add')
            .onClick(() => {
              this.src.pushData('testEl' + this.src.totalCount())
            })
          Button('delete')
            .onClick(() => {
              this.src.deleteData(0);
            })
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}
```