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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
jQuery实现文档树效果
Feb 20 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 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/08/10 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP多线程类及用法实例
2014/12/03 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Python描述器descriptor详解
2015/02/03 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python中的变量和作用域详解
2016/07/13 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
中专生求职自荐信范文
2013/12/22 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
学校社会实践活动总结
2014/07/03 职场文书
2014年科研工作总结
2014/12/03 职场文书
工程主管竞聘书
2015/09/15 职场文书
高中信息技术教学反思
2016/02/16 职场文书