data-list

Scroll to bottom and load more list items easily.

中文文档

Table of Contents

• Introduction
  • Why
• Features
• Links
• Pre Install
• Quick Start
• Example
  • Basic
  • Slot Content
  • Reset
• Contributing
• Contributors
• 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

Links

• docs
• thanks to v-infinite-loading

⬆ Back to Top

Pre Install

Make sure you have installed it correctly axios

yarn add axios

Then register globally axios

import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios

⬆Back to Top

Quick Start

# install
yarn add @femessage/data-list

// use it in .vue files
<template>
  <data-list ref="dataList" :url="url">
    <ul slot-scope="props">
      <li v-for="(item, index) in props.list" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </data-list>
</template>
<script>
import DataList from '@femessage/data-list'
export default {
  name: 'data-list',
  components: {DataList},
  data() {
    return {
      url:
        'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/data-list'
    }
  }
}
</script>

⬆Back to Top

Example

Basic

Slot Content

Reset

⬆Back to Top

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.

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

⬆ Back to Top