staticdeng / vuejs-loadmore

A pull-down refresh and pull-up loadmore scroll component for Vue.js. Vue上拉加载下拉刷新组件

vuejs-loadmore

一个Vue.js 的下拉刷新和上拉加载组件。

通过提供简单的api易于使用。与其他组件库不同，它使用浏览器本身而不是js来作滚动容器，因此它的代码量更小，但不损失用户体验。

中文 | English

预览

在线demo

也可以扫描以下二维码访问演示：

安装 & 使用

安装 npm 包

# npm
npm install vuejs-loadmore --save

全局导入

import Vue from 'vue';
import VueLoadmore from 'vuejs-loadmore';

Vue.use(VueLoadmore);

国际化支持

支持中文 zh-CN 和英文 en-US, 默认为 zh-CN。

import VueLoadmore from 'vuejs-loadmore';

Vue.use(VueLoadmore, {
  lang: 'en-US'
})

你也可以使用 locale.use() 指定语言。

import VueLoadmore, { locale } from 'vuejs-loadmore';

Vue.use(VueLoadmore);
locale.use('en-US');

用法

基础用法

<vue-loadmore 
  :on-refresh="onRefresh" 
  :on-loadmore="onLoad"
  :finished="finished">
  <div v-for="(item, i) of list" :key="i"></div>
</vue-loadmore>

on-refresh 和 on-loadmore 会在下拉刷新或滚动到底部时触发，需要在处理完数据请求后执行回调函数 done()。

如果你不需要刷新，只需要不绑定on-refresh。

当数据请求完成后，你可以将finished的数据改为true，这样就会显示没有更多了。

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      finished: false
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    onRefresh(done) {
      this.list = [];
      this.page = 1;
      this.finished = false;
      this.fetch();

      done();
    },

    onLoad(done) {
      if (this.page <= 10) {
        this.fetch();
      } else {
        // all data loaded
        this.finished = true;
      }
      done();
    },

    fetch() {
      for (let i = 0; i < this.pageSize; i++) {
        this.list.push(this.list.length + 1);
      }
      this.page++;
    }
  },
}

错误提示

<vue-loadmore 
  :on-loadmore="onLoad"
  :finished="finished"
  :error.sync="error">
  <div v-for="(item, i) of list" :key="i"></div>
</vue-loadmore>

export default {
  data() {
    return {
      list: [],
      finished: false,
      error: false,
    };
  },
  methods: {
    onLoad() {
      fetchSomeThing().catch(() => {
        this.error = true;
      });
    },
  },
};

API

Props

Attribute	Description	Type	Default
on-refresh	顶部下拉触发	function	-
pulling-text	下拉显示文本	string	下拉刷新
loosing-text	释放显示文本	string	释放刷新
refresh-text	正在刷新显示文本	string	正在刷新
success-text	刷新完成显示文本	string	刷新完成
show-success-text	是否显示success-text	boolean	true
pull-distance	触发正在刷新状态的距离	number | string	50
head-height	正在刷新显示区域的高度	number | string	50
animation-duration	下拉刷新动画持续时间	number | string	200
on-loadmore	滚动到底部触发	function	-
immediate-check	是否立即触发数据加载；默认是，否的话则自己定义触发数据加载时机	boolean	true
load-offset	当滚动条到底部的距离小于 load-offset 时，会发出 on-loadmore	number | string	50
finished	数据是否加载完毕，改变为true，则会显示finished-text	boolean	false
error	数据是否加载错误，on-loadmore只有在点击错误文本时才会触发，需要sync修饰符	boolean	false
loading-text	滚动到底部正在加载显示文本	string	正在加载
finished-text	滚动到底部加载完毕的显示文本	string	没有更多了
error-text	加载错误显示文本	string	请求失败，点击重新加载

方法

使用 ref 获取 List 实例并调用实例方法。

Name	Description
checkScroll	检查当前的滚动位置，若已滚动至底部，则会触发 on-loadmore

例子

查看demo以快速了解如何使用此包。

git clone [email protected]:staticdeng/vuejs-loadmore.git
yarn install
yarn example:dev

vuejs-loadmore's Issues

In README, there have something wrong with the attribute name

It should be refresh-text not loading-text

scroll to top and load more

expect load more data when scroll to top, like fb messenger example

ERROR in xxx.js from UglifyJs Unexpected token: name (hook)

When I use this component library, it runs normally local development, but an error is reported when using uglifyjs webpack plugin for webpack packaging.

The following is the detailed error reporting information:

ERROR in js/vendors.bc580846f352f4ad3188.js from UglifyJs Unexpected token: name (hook) [js/vendors.bc580846f352f4ad3188.js:56427,10] Child extract-text-webpack-plugin ../../../node_modules/extract-text-webpack-plugin/dist ../../../node_modules/css-loader/index.js!../../../node_modules/postcss-loader/lib/index.js??ref--1-3!../../../node_modules/less-loader/dist/cjs.js!../stylesheets/application.less:

TypeError: Cannot read property 'getBoundingClientRect

调用的时候为什么一直报这个错
"[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'getBoundingClientRect' of undefined"\n\nfound in\n\n---> \n at src/xxx.vue\n at src/App.vue\n "

There are two props called 'loading-text'.

hi I have two questions :)

One is Refreshing, the other is Loading.
I want to use the two separately.

and

Is there any way to turn off infinite scroll?

vue3支持

东西很不错，能支持vue3吗？

To bad I can not get this to work in Vue 3

Trying to use this in Vue 3 gives errors about no default import from vue and once you work around that, it gives other errors about missing things as well.

A proper example of how to use this in Vue 3 ( with <script setup> syntax ) would be great.

为什么要延时500毫秒loadmore

vue为什么是dependencies 依赖?

load-offset not working

onLoadMore does not work when load-offset > 500, and works normally when load-offset < 500. I dont' understand why.
Please help me