Scroll to bottom and load more list items easily.
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.
- 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
- docs
- thanks to v-infinite-loading
Make sure you have installed it correctly axios
yarn add axiosThen register globally axios
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios# 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>
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.
Thanks goes to these wonderful people (emoji key):
 listars 💻 🐛 📖 💡 |  levy 👀 🤔 |  EVILLT 🚇 |  OuZuYu 🐛 |  Donald Shen 🐛 💬 |
This project follows the all-contributors specification. Contributions of any kind welcome!