帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue上拉加载下拉刷新组件

帝国模板之家 2022-03-01 网页特效 评论

简介

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

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

全局导入

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

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
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言