data-list

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

English

Introduction

What is `data-list`

data-list组件是基于 v-infinite-loading 封装的列表渲染组件。只需要配置 url 和 datahPath 即可进行数据处理，提供无限滚动，滑动加载更多数据等功能。

Why

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

Features

传入url即会请求获取数据
自带下拉加载更多，分页数据处理
自动判断当前第几页，是否已到尾页、并且停止数据的加载
支持获取不到数据、没有更多数据、请求错误等场景的提示语（可自定义）
可以保存列表滚动状态，访问详情页后返回或页面刷新，能恢复之前的滚动位置

⬆ Back to Top

Links

docs

⬆ Back to Top

Pre Install

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

yarn add axios

然后在全局注册axios

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

⬆ Back to Top

Quick start

# Step1 安装
yarn add @femessage/data-list

// Step2 在需要渲染列表的 .vue 文件中
<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>