# @leafiy/vuejs-loadmore
> A pull-down refresh and pull-up loadmore scroll component for Vue.js
Latest version **1.0.1** (published 2022-10-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install @leafiy/vuejs-loadmore
pnpm add @leafiy/vuejs-loadmore
yarn add @leafiy/vuejs-loadmore
bun add @leafiy/vuejs-loadmore
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-10-28 |
| First published | 2022-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 49.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 84 |
| Author | staticdeng |
| Maintainers | leafiy |
| Keywords | vue-loadmore, vue-refresh, vue-srcoll, loadmore, refresh, srcoll |
## Links
- npm: https://www.npmjs.com/package/@leafiy/vuejs-loadmore
- Repository: https://github.com/staticdeng/vuejs-loadmore
- Homepage: https://github.com/staticdeng/vuejs-loadmore#readme
- Issues: https://github.com/staticdeng/vuejs-loadmore/issues
- npm.io page: https://npm.io/package/@leafiy/vuejs-loadmore
## Dependencies (1)
- [vue](https://npm.io/package/vue.md) ^2.6.14
## Alternatives
- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads
## Recent versions
- 1.0.1 (latest) — 2022-10-28
- 1.0.0 — 2022-10-28
## README
# vuejs-loadmore
[](https://www.npmjs.com/package/vuejs-loadmore) [](https://github.com/staticdeng/vuejs-loadmore/actions)
[](https://nodei.co/npm/vuejs-loadmore/)
一个 Vue.js 的下拉刷新和上拉加载组件。
通过提供简单的 api 易于使用。与其他组件库不同，它使用浏览器本身而不是 js 来作滚动容器，因此它的代码量更小，但不损失用户体验。
**中文** | [English](./README.en-US.md)
## 预览
[在线 demo](https://staticdeng.github.io/vuejs-loadmore/)
也可以扫描以下二维码访问演示：
#### slots
代替 locale
```
loading
loadingText
finished
error
```
## 安装 & 使用
#### 安装 npm 包
```bash
# npm
npm install vuejs-loadmore --save
```
#### 全局导入
```js
import Vue from 'vue';
import VueLoadmore from 'vuejs-loadmore';
Vue.use(VueLoadmore);
```
## 国际化支持
支持中文 zh-CN 和英文 en-US, 默认为 zh-CN。
```js
import VueLoadmore from 'vuejs-loadmore';
Vue.use(VueLoadmore, {
lang: 'en-US',
});
```
你也可以使用 `locale.use()` 指定语言。
```js
import VueLoadmore, { locale } from 'vuejs-loadmore';
Vue.use(VueLoadmore);
locale.use('en-US');
```
## 用法
### 基础用法
```html
```
`on-refresh` 和 `on-loadmore` 会在下拉刷新或滚动到底部时触发，需要在处理完数据请求后执行回调函数 `done()`。
如果你不需要刷新，只需要不绑定`on-refresh`。
当数据请求完成后，你可以将`finished`的数据改为 true，这样就会显示`没有更多了`。
```js
export default {
data() {
return {
list: [],
page: 1,
pageSize: 10,
finished: false,
};
},
mounted() {
this.fetch();
},
methods: {
onRefresh(done) {
this.list = [];
this.page = 1;
this.finished = false;
this.fetch();
done();
},
onLoad(done) {
if (this.page <= 10) {
this.fetch();
} else {
// all data loaded
this.finished = true;
}
done();
},
fetch() {
for (let i = 0; i < this.pageSize; i++) {
this.list.push(this.list.length + 1);
}
this.page++;
},
},
};
```
### 错误提示
```html
```
```js
export default {
data() {
return {
list: [],
finished: false,
error: false,
};
},
methods: {
onLoad() {
fetchSomeThing().catch(() => {
this.error = true;
});
},
},
};
```
## API
### Props
| Attribute | Description | Type | Default |
| ------------------ | ----------------------------------------------------------------------------- | ------------------ | ------------------------ |
| on-refresh | 顶部下拉触发 | _function_ | - |
| pulling-text | 下拉显示文本 | _string_ | `下拉刷新` |
| loosing-text | 释放显示文本 | _string_ | `释放刷新` |
| loading-text | 正在刷新显示文本 | _string_ | `正在刷新` |
| success-text | 刷新完成显示文本 | _string_ | `刷新完成` |
| show-success-text | 是否显示`success-text` | _boolean_ | `true` |
| pull-distance | 触发正在刷新状态的距离 | _number \| string_ | `50` |
| head-height | 正在刷新显示区域的高度 | _number \| string_ | `50` |
| animation-duration | 下拉刷新动画持续时间 | _number \| string_ | `200` |
| on-loadmore | 滚动到底部触发 | _function_ | - |
| immediate-check | 是否在 mounted 之后立即检查 | _boolean_ | `true` |
| load-offset | 当滚动条到底部的距离小于 `load-offset` 时，会发出 `on-loadmore` | _number \| string_ | `50` |
| finished | 数据是否加载完毕，改变为 true，则会显示`finished-text` | _boolean_ | `false` |
| error | 数据是否加载错误，`on-loadmore`只有在点击错误文本时才会触发，需要`sync`修饰符 | _boolean_ | `false` |
| loading-text | 滚动到底部正在加载显示文本 | _string_ | `正在加载` |
| finished-text | 滚动到底部加载完毕的显示文本 | _string_ | `没有更多了` |
| error-text | 加载错误显示文本 | _string_ | `请求失败，点击重新加载` |
### 方法
使用 ref 获取 List 实例并调用实例方法。
| Name | Description |
| ----------- | ---------------------------------------------------------- |
| checkScroll | 检查当前的滚动位置，若已滚动至底部，则会触发 `on-loadmore` |
## 例子
查看 demo 以快速了解如何使用此包。
```bash
git clone git@github.com:staticdeng/vuejs-loadmore.git
yarn install
yarn example:dev
```
---
_Source: https://npm.io/package/@leafiy/vuejs-loadmore · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._