data-list

Scroll to bottom and load more list items easily.

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>