# @femessage/data-list > [![Build Status](https://badgen.net/travis/FEMessage/data-list/master)](https://travis-ci.com/FEMessage/data-list) [![NPM Download](https://badgen.net/npm/dm/@femessage/data-list)](https://www.npmjs.com/package/@femessage/data-list) [![NPM Version](https: Latest version **1.4.0** (published 2020-11-11) · MIT license · 0 weekly downloads ## Install ```sh npm install @femessage/data-list pnpm add @femessage/data-list yarn add @femessage/data-list bun add @femessage/data-list ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.0 | | Published | 2020-11-11 | | First published | 2019-01-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >= 4.0.0 | | Dependencies | 2 | | Unpacked size | 75.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 15 | | Author | https://github.com/FEMessage | | Maintainers | levy9527 | | Keywords | vue, load-more, list | ## Links - npm: https://www.npmjs.com/package/@femessage/data-list - Repository: https://github.com/FEMessage/data-list - Homepage: https://github.com/FEMessage/data-list#readme - Issues: https://github.com/FEMessage/data-list/issues - npm.io page: https://npm.io/package/@femessage/data-list ## Dependencies (2) - [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2 - [vue-infinite-loading](https://npm.io/package/vue-infinite-loading.md) ^2.4.4 ## Recent versions - 1.4.0 (latest) — 2020-11-11 - 1.3.0 — 2020-07-31 - 1.2.4 — 2019-11-16 - 1.2.3 — 2019-10-23 - 1.2.2 — 2019-10-21 - 1.2.1 — 2019-10-17 - 1.2.0 — 2019-08-17 - 1.1.8 — 2019-08-10 - 1.1.7 — 2019-08-07 - 1.1.6 — 2019-07-17 - 1.1.5 — 2019-07-10 - 1.1.4 — 2019-07-05 - 1.1.3 — 2019-06-24 - 1.1.2 — 2019-06-10 - 1.1.1 — 2019-05-31 - … 3 more at https://npm.io/package/@femessage/data-list/versions ## README # data-list [![Build Status](https://badgen.net/travis/FEMessage/data-list/master)](https://travis-ci.com/FEMessage/data-list) [![NPM Download](https://badgen.net/npm/dm/@femessage/data-list)](https://www.npmjs.com/package/@femessage/data-list) [![NPM Version](https://badgen.net/npm/v/@femessage/data-list)](https://www.npmjs.com/package/@femessage/data-list) [![NPM License](https://badgen.net/npm/license/@femessage/data-list)](https://github.com/FEMessage/data-list/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/data-list/pulls) [![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/) Scroll to bottom and load more list items easily. ![](https://i.loli.net/2019/11/15/H2uRgN8fsp4YDkW.gif) [中文文档](./README-zh.md) ## Table of Contents - [Introduction](#introduction) - [Why](#why) - [Features](#features) - [Links](#links) - [Pre Install](#pre-install) - [Quick Start](#quick-start) - [Example](#example) - [Basic](#basic) - [Slot Content](#slot-content) - [Reset](#reset) - [Contributing](#contributing) - [Contributors](#contributors) - [License](#license) ## Introduction ### Why In daily developement, there are lots of list rendering scenes, usually the data processing logic of these lists is similar or repeated. To avoid getting duplicate code, `data-list` is born. ## Features - Automatically request after setting url - Bound with auto load more, paging data processing - Support storage request parameters, you can turn up the page to get the previous page data, get the next page data down - Automatically judge the current page, whether it has reached the bottom and stop loading data - Support for scenes such as no data, no more data, request errors, etc. (customizable) - Support saving scrolling status, can return to the previous scrolling position after router go back or page reload [⬆Back to Top](#table-of-contents) ## Links - [docs](https://FEMessage.github.io/data-list/) - thanks to [v-infinite-loading](https://peachscript.github.io/vue-infinite-loading/) [⬆ Back to Top](#table-of-contents) ## Pre Install Make sure you have installed it correctly `axios` ```bash yarn add axios ``` Then register globally `axios` ```javascript import Vue from 'vue' import axios from 'axios' Vue.prototype.$axios = axios ``` [⬆Back to Top](#table-of-contents) ## Quick Start ```sh # install yarn add @femessage/data-list ``` ```vue // use it in .vue files ``` [⬆Back to Top](#table-of-contents) ## Example ### Basic ![](https://i.loli.net/2019/11/15/etjM5F3Z2uhk8J6.gif) ### Slot Content ![](https://i.loli.net/2019/11/15/7t5wiNqugCe4ohW.gif) ### Reset ![](https://i.loli.net/2019/11/15/w3mnFU6oXBpLsI8.gif) [⬆Back to Top](#table-of-contents) ## Contributing For those who are interested in contributing to this project, such as: - report a bug - request new feature - fix a bug - implement a new feature Please refer to our [contributing guide](https://github.com/FEMessage/.github/blob/master/CONTRIBUTING.md). [⬆ Back to Top](#table-of-contents) ## Contributors Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

listars
💻 🐛 📖 💡
levy
👀 🤔
EVILLT
🚇
OuZuYu
🐛
Donald Shen
🐛 💬
Sponge
🐛
Han
📖

PPPenny
💻 📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! ## License [MIT](./LICENSE) [⬆ Back to Top](#table-of-contents) --- _Source: https://npm.io/package/@femessage/data-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._