# pulldown-infinity-scroll

> A Better-scroll Pull-down Plugin

Latest version **1.0.10** (published 2024-01-23) · 0 weekly downloads

## Install

```sh
npm install pulldown-infinity-scroll
pnpm add pulldown-infinity-scroll
yarn add pulldown-infinity-scroll
bun add pulldown-infinity-scroll
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2024-01-23 |
| First published | 2023-03-02 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 144.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wulawa |
| Keywords | better-scroll plugin |

## Links

- npm: https://www.npmjs.com/package/pulldown-infinity-scroll
- npm.io page: https://npm.io/package/pulldown-infinity-scroll

## Dependencies (3)

- [better-scroll](https://npm.io/package/better-scroll.md) ^2.5.0
- [@better-scroll/core](https://npm.io/package/@better-scroll/core.md) ^2.5.1
- [@better-scroll/shared-utils](https://npm.io/package/@better-scroll/shared-utils.md) ^2.5.1

## Recent versions

- 1.0.10 (latest) — 2024-01-23
- 1.0.9 — 2023-04-18
- 1.0.8 — 2023-04-14
- 1.0.7 — 2023-04-14
- 1.0.6 — 2023-04-14
- 1.0.5 — 2023-04-10
- 1.0.4 — 2023-04-07
- 1.0.3 — 2023-03-15
- 1.0.2 — 2023-03-02
- 1.0.1 — 2023-03-02
- 1.0.0 — 2023-03-02

## README

## 使用

### 安装

```bash
// with npm
npm install pulldown-infinity-scroll

// with yarn
yarn add pulldown-infinity-scroll
```
### 示例
```js
import BScroll from '@better-scroll/core'
import InfinityScroll, {InfinityOptions} from 'pulldown-infinity-scroll'
BScroll.use(InfinityScroll)

const bs = new BScroll('.wrapper', {
  'pulldown-infinity': {
    fetch(count, loadednum) {
      // 获取大于 count 数量的数据，该函数是异步的，它需要返回一个 Promise。
      // 成功获取数据后，你需要 resolve 数据数组（也可以 resolve 一个 Promise）（数据中必须包含id,计算、销毁等都需要id来确认）。
      // 数组的每一个元素是列表数据，在 render 方法执行的时候会传递这个数据渲染。
      // 如果没有数据的时候，你可以 resolve(false)，来告诉无限滚动列表已经没有更多数据了。
      // loadednum为已加载的数量
    }
    render(item, div, index) {
      // 渲染每一个元素节点，item 是数据，div 是包裹元素节点的容器, index为当前索引。
      // 该函数需要返回渲染后的 DOM 节点。
      // 在vue2中可以使用 Vue.extend来生成组件并获取组件的dom返回
      // 在vue3（当前最新为3.25）中可以使用 createApp来生成一个应用，然后挂载到指定dom中然后返回
    },
    createTombstone() {
      // 返回一个墓碑 DOM 节点。
    },
    destroy(id) {
      // 当未展示内容销毁时触发
    }
  } as InfinityOptions<fetchData>
})
```


| Event               | Description                                             | 参数                      |
| ------------------- | ------------------------------------------------------- | ------------------------ |
| reset               | 刷新scroll,并且重新请求数据 | 无 | 
| unshift             | 手动添加新的数据 | extends {id: string \| number} | 
| resize              | 保持滚动位置，重新计算，当列表dom尺寸改变时调用，以保证布局正确 | 无 ｜
| remove              | 删除指定数据 | id: string \| number |
| replace              | 替换指定数据 | extends {id: string \| number} |
| rerender              | 保持滚动位置重新渲染内容 | 无 |



#### 示例

```js
bs.trigger('reset');
bs.trigger('resize');
bs.trigger('unshift', chatData);
bs.trigger('replace', chatData);
bs.trigger('remove', id);
```

---
_Source: https://npm.io/package/pulldown-infinity-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._