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 isType() 类型判断代码
Feb 14 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
vue跨域解决方法
Oct 15 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
小程序图片长按识别功能的实现方法
Aug 30 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python实现telnet客户端的方法
2015/04/15 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python 拼接文件路径的方法
2018/10/23 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
《望庐山瀑布》教学反思
2014/04/22 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
经理聘任证明
2015/03/02 职场文书
培训通知书模板
2015/04/17 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Django给表单添加honeypot验证增加安全性
2021/05/06 Python