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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
JS中Location使用详解
May 12 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
Angular.js之作用域scope'@','=','&'实例详解
Feb 28 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php获得当前的脚本网址
2007/12/10 PHP
php5中类的学习
2008/03/28 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php生成与读取excel文件
2016/10/14 PHP
php-app开发接口加密详解
2018/04/18 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python实现的自动发送消息功能详解
2019/08/15 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
迟到检讨书800字
2014/01/13 职场文书
高中语文教学反思
2014/01/16 职场文书
购房协议书范本
2014/04/11 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android