Vue mobile terminal pull-down refresh and pull-up loading components, small size and fast operation

The following introduces a Vue mobile terminal pull-down refresh and pull-up loading component, which is small in size and runs fast, and is very simple to use.

A pull-to-refresh and pull-up load component for Vue.js.

Easy to use by providing simple api. Unlike other component libraries, it uses the browser itself instead of js for the scrolling container, so its code size is smaller without losing user experience.

Chinese | English

preview

demo

The demo can also be accessed by scanning the QR code below:

<img src="https://user-images.githubusercontent.com/20060839/145163261-02025f86-ac87-4016-859f-15677a6d3cf7.png" width="220" height="220" >

Install & use

Install npm package

# npm
npm install vuejs-loadmore --save

global import

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

Vue.use(VueLoadmore);

International support

Support Chinese zh-CN and English en-US, the default is zh-CN.

import VueLoadmore from 'vuejs-loadmore';

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

You can also specify the language locale.use()

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

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

usage

Basic usage

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

on-refresh and on-loadmore will be triggered when pull down to refresh or scroll to the bottom, and the callback function done() needs to be executed after processing the data request.

If you don't need to refresh, just unbind on-refresh .

When the data request is completed, you can change finished to true, which will show there is no more for 161ee24507fa4f.

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++;
    }
  },
}

Error message

<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	top pull down trigger	function	-
pulling-text	drop down display text	string	pull down to refresh
loosing-text	release display text	string	release refresh
loading-text	Refreshing display text	string	is refreshing
success-text	Refresh complete display text	string	refresh completed
show-success-text	Whether to display success-text	boolean	true
pull-distance	The distance to trigger the Refreshing state	_number \	string_	50
head-height	Refreshing the height of the display area	_number \	string_	50
animation-duration	Pull down to refresh animation duration	_number \	string_	200
on-loadmore	Scroll to bottom trigger	function	-
immediate-check	Whether to check immediately after mounted	boolean	true
load-offset	When the distance from the scroll bar to the bottom is less than load-offset on-loadmore will be issued	_number \	string_	50
finished	Whether the data is loaded, if changed to true, it will display finished-text	boolean	false
error	Whether the data is loaded incorrectly, on-loadmore is only triggered when the error text is clicked, the sync modifier is required	boolean	false
loading-text	scroll to bottom loading display text	string	is loading
finished-text	Scroll to bottom loaded display text	string	no more
error-text	Loading error display text	string	request failed, click reload

method

Use ref to get the List instance and call the instance method.

Name	Description
checkScroll	Check the current scroll position, if it has scrolled to the bottom, it will trigger on-loadmore

example

Check out the demo for a quick overview of how to use this package.

git clone [e-mail]:staticdeng/vuejs-loadmore.git
yarn install
yarn example:dev