关于前端:vue移动端下拉刷新和上拉加载组件体积小运行快

上面介绍一款vue挪动端下拉刷新和上拉加载组件，体积小运行快，应用起来很简略。

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

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

中文 | English

预览

在线demo

也能够扫描以下二维码拜访演示：

装置 & 应用

装置 npm 包

# npmnpm 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	`开释刷新`
loading-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	是否在mounted之后立刻查看	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 git@github.com:staticdeng/vuejs-loadmore.gityarn installyarn example:dev