Load-more-list NPM

加载更多列表组件

GIF

NPM

npm install load-more-list --save

yarn add load-more-list

import

import LoadMoreList from 'load-more-list';
import 'load-more-list/dist/index.css';
export default {
  components:{ LoadMoreList }
}

API

export default {
  name: 'LoadMoreList',
  emits: ['load-more'], //加载更多事件
  props: {
    //是否有更多列表项
    hasMore: {
      type: Boolean,
      default: true,
    },
    //加载中
    loading: {
      type: Boolean,
      default: false,
    },
    //mount时自动加载
    loadOnMounted: {
      type: Boolean,
      default: true,
    },
    //加载的占位符
    skeletonCount: {
      type: Number,
      default: 3,
    },
    //触发加载时距离底部的距离
    bottomThreshold: {
      type: Number,
      default: 100,
    },
    //没有更多的文字
    noMoreText: String,
    //加载更多文字
    loadMoreText: String,
  },
}

SLOTS

skeleton 完全替换加载占位,默认包含skeletonCount个skeleton-item
props:
- loading 是否加载中
skeleton-item 占位item替换
props:
- 无
footer 完全替换footer,默认包含loading,no-more,load-more三个插槽
props:
- hasMore 是否还有
- loading 是否加载中
- clickLoadMore 触发加载方法
loading 替换loading
props:
- hasMore 是否还有
- loading 是否加载中
no-more 替换no-more
props:
- hasMore 是否还有
- loading 是否加载中
load-more 替换load-more
props:
- hasMore 是否还有
- loading 是否加载中
- clickLoadMore 触发加载方法