vueScroll实现移动端下拉刷新、上拉加载


Posted in Javascript onMarch 22, 2019

移动端开发,处理列表翻页和数据的时候,下拉刷新和上拉加载应用的比较广泛,今天给大家推荐一个vue的插件,vueScroll,首先上图:

vueScroll实现移动端下拉刷新、上拉加载

话不多说,上代码了:

一、引入并使用VueScroll

import VueScroller from 'vue-scroller';
Vue.use(VueScroller)

二、在html或者.vue组件里面使用

vueScroll实现移动端下拉刷新、上拉加载

三、在js文件里面操作插件

首先在在methods里面写上方法

vueScroll实现移动端下拉刷新、上拉加载

在data里面实现申明好 isLoading = true;

然后继续在methods里面写上刷新和加载的方法:

refresh(done) {
  let timer = null;
  this.page = 1;
  clearTimeout(timer);
  timer = setTimeout(() => {
     this.myInstalHomeFun(done);
  }, 500);
},
infinite(done) {
  let timer = null;
  clearTimeout(timer);
  timer = setTimeout(() => {
     this.myInstalHomeFun(done);
  }, 500);
}

到这里就可以实现效果了,但是但是 有几个细节我必须提一下:

(1)高度的问题,这个插件需要给外层的scroller 设置高度,所以要注意,我这里是这样操作的:

methods: {
    // 获取高度
    getHeight(){
      let bodyHeight = document.documentElement.clientHeight;
      let scroller = this.$refs.scroller;
      let scrollerTop = scroller.getBoundingClientRect().top;
      scroller.style.height = (bodyHeight-scrollerTop)+"px";
    },
}

并且在mounted里面调用这个方法,这样就可以把高度设置好,并且在任何位置都可以放置了

(2)vueScoller 内部的结构是绝对定位,所以一定要给外层设置好相对定位;

vueScroll实现移动端下拉刷新、上拉加载

vueScroll实现移动端下拉刷新、上拉加载

这样就可以解觉定位引起的位置跑偏的问题了。

参考文档:https://vuescrolljs.yvescoding.org

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
Javascript 解疑
Nov 11 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
浅谈Angular单元测试总结
Mar 22 #Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 #Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 #Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 #Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 #Javascript
如何从零开始手写Koa2框架
Mar 22 #Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 #Javascript
You might like
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
PHP $_FILES函数详解
2011/03/09 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP SOCKET编程详解
2015/05/22 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
python抓取网页内容示例分享
2014/02/24 Python
跟老齐学Python之list和str比较
2014/09/20 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python3实现多线程聊天室
2018/12/12 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python2与Python3的区别点整理
2019/12/12 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
python中def是做什么的
2020/06/10 Python
C++的几个面试题附答案
2016/08/03 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
网络管理员岗位职责
2014/03/17 职场文书
建材投资建议书
2014/05/16 职场文书
购房协议书范本
2014/10/02 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python