Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/femessage/data-list

📜Load more list items easily
https://github.com/femessage/data-list

list load-more

Last synced: 4 days ago
JSON representation

📜Load more list items easily

Host: GitHub
URL: https://github.com/femessage/data-list
Owner: FEMessage
License: mit
Created: 2019-01-04T12:21:46.000Z (almost 6 years ago)
Default Branch: dev
Last Pushed: 2020-11-11T10:11:59.000Z (about 4 years ago)
Last Synced: 2024-11-01T07:08:37.556Z (12 days ago)
Topics: list, load-more
Language: Vue
Homepage: https://femessage.github.io/data-list/
Size: 3.79 MB
Stars: 15
Watchers: 3
Forks: 11
Open Issues: 1
Metadata Files:
- Readme: README-zh.md
- License: LICENSE

Awesome Lists containing this project

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/)

更好用的滚动加载更多列表组件

![](https://i.loli.net/2019/11/15/H2uRgN8fsp4YDkW.gif)

[English](./README-en.md)

## Table of Contents

- [Introduction](#introduction)

  - [What is `data-list`](#what-is-data-list)

  - [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

### What is `data-list`

`data-list`组件 是基于 [v-infinite-loading](https://peachscript.github.io/vue-infinite-loading/) 封装的列表渲染组件。只需要配置 url 和 datahPath 即可进行数据处理，提供无限滚动，滑动加载更多数据等功能。

### Why

日常需要面对大量列表渲染的场景，通常这些列表的数据处理逻辑是相似或重复的。为避免写重复代码，data-list 因此诞生了。

## Features

- 传入`url`即会请求获取数据

- 自带下拉加载更多，分页数据处理

- 自动判断当前第几页，是否已到尾页、并且停止数据的加载

- 支持获取不到数据、没有更多数据、请求错误等场景的提示语（可自定义）

- 可以保存列表滚动状态，访问详情页后返回或页面刷新，能恢复之前的滚动位置

[⬆ Back to Top](#table-of-contents)

## Links

- [docs](https://FEMessage.github.io/data-list/)

[⬆ Back to Top](#table-of-contents)

## Pre Install

先确保你已经正确安装了`axios`

```sh

yarn add axios

```

然后在全局注册`axios`

```js

import Vue from 'vue'

import axios from 'axios'

Vue.prototype.$axios = axios

```

[⬆ Back to Top](#table-of-contents)

## Quick start

```sh

# Step1 安装

yarn add @femessage/data-list

```

```vue

// Step2 在需要渲染列表的 .vue 文件中

  

    


      

        {{ item.name }}

      

    

  

import DataList from '@femessage/data-list'

export default {

  name: 'data-list',

  components: {DataList},

  data() {

    return {

      url:

        'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/data-list'

    }

  }

}

```

[⬆ 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}
🐛 💬

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)