基于vue的下拉刷新指令和滚动刷新指令


Posted in Javascript onDecember 23, 2016

小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加“加载更多”的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式!

其实,这种实现数据加载的原理很简单

在滚动刷新的时候,需要在列表滚动到底部的时候,触发相应的回调函数,激发加载更多数据

在下拉刷新的时候,通过判断列表的用户手指离开的时候的偏移量,触发相应的回调函数,激发数据刷新

当然,在这里,为什么下拉列表的时候是激发数据刷新,在列表滚动到底部的时候激发加载更多数据,这既算是交互上的一种优化,也是一种用户习惯的约定俗成,一般用户在滚动列表的时候,希望的是看到更多的数据;当用户试图看到已经加载的数据的新的状态时,用户会偏向于下拉刷新这个列表,这在Native App亦或是Web app中都是大同小异的。

当然,这些都不过是js懒加载技术的不同实现方式。

那么,我们先来看下实现之后的效果,这也是小编目前在做的一款移动端的产品

基于vue的下拉刷新指令和滚动刷新指令基于vue的下拉刷新指令和滚动刷新指令

首先,我们先看下,列表的滚动刷新,那么到底如何去判断列表已经滚动到了底部呢?

我们先看一个图,了解一些基本概念:

基于vue的下拉刷新指令和滚动刷新指令

这里小编只列举了我们常用的界面高度和宽度元素,这其中:

clientHeight

内容可视区域的高度,也就是说页面浏览器可以看到内容的这个区域的高度,但要注意padding是算在内的

offsetHeight

在IE6,IE7,IE8以及最新的的FF, Chrome中,在元素上都是offsetHeight = clientHeight + 滚动条 + 边框

scrollHeight

这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..

在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.

在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15

那么,在这里,我们会发现,当scrollTop + offsetHeight >= scrollHeight的时候,其实,我们的滚动条就已经到达最底部了,那么,滚动刷新触发的逻辑也就出来了,那么,这里会需要这样几个方法,来获取不同的高度元素

基于vue的下拉刷新指令和滚动刷新指令

各个高度元素的方法有了,接下来,我们需要有一个方法去检查页面额滚动条是否已经到达了底部,那么,其实就是执行这个公式的计算逻辑

基于vue的下拉刷新指令和滚动刷新指令

那,这里的loadDownFn就是我们的滚动刷新的方法,这个方法也是通过指令的方式传递到这个组件之中的,这点在接下来也会提到。

既然有了检查滚动条滚动位置的方法,那如何才能够激发这个方法在用户滚动列表的时候执行呢,那么,我们需要在列表滚动的时候,去激发检查方法的执行,其实这里就是对列表的scroll事件绑定了监听器。

基于vue的下拉刷新指令和滚动刷新指令

那么,在这里,throttle是个限速器,防止滚动条滑懂到底部时多次激发刷新函数

因此我们的滚动刷新也就完成了,其实回头看看,毕竟JS实现的代码会有一些回调方法在里面,影响了我们通常的线性思维,但是我们可以发现,思路还是很清晰的,那接下来,我们看下下拉刷新的是如何实现的。

其实下拉刷新的触发逻辑也是很简单的,说白了,就是在用户手指接触屏幕的时候,捕获一下列表所在div的一个高度坐标,在用户手指脱离屏幕的时候再捕获一下列表所在div的一个高度坐标,做个差值判断一下用户的执行的动作是否是摁住该div的一个拉动动作(注意:不是滚动动作哦),从而判断是否应该激发我们的数据刷新方法。

那在这里,我们捕获用户的触屏操作,需要利用到H5的touch事件,这里,我们再翻开教科书看下,H5的touch事件都指的是什么?

触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候触发,这其中包括以下几个事件:

(on)touchstart:触摸开始的时候触发
(on)touchmove:手指在屏幕上滑动的时候触发
(on)touchend:触摸结束的时候触发
(on)touchcancel:系统取消touch事件的时候触发。例如电话接入或者弹出信息。一般用在游戏:玩着的时候,突然来电话了,就触发touchcancel事件暂停游戏、存档等操作。

那,在这里,小编主要用到了touchstart,touchmove和touchend这三个事件,分别用来捕获用户的触屏行为:

基于vue的下拉刷新指令和滚动刷新指令

基于vue的下拉刷新指令和滚动刷新指令

基于vue的下拉刷新指令和滚动刷新指令

在touchmove里面,大家要注意,由于微信中的webview会存在黑底的问题,因此我们拉动列表的时候,会出现露出微信上方黑底的问题,因此,我们需要调用preventDefault方法,防止事件继续向上冒泡,从而防止用户在拖动列表的时候,微信上方出现黑底,那样会十分影响体验。

那接下来,我们需要做的就是把这些触摸事件绑定到滚动条上就行了:

基于vue的下拉刷新指令和滚动刷新指令

那么,我们的下拉刷新的主要逻辑也就完成了

当然这里,我们也需要提供灵活的方式,能够动态的去绑定和解绑下拉刷新和滚动刷新的方法

基于vue的下拉刷新指令和滚动刷新指令

基于vue的下拉刷新指令和滚动刷新指令

最后,因为我们的控件没办法知道我们的数据已经加载完,因此我们需要提供一个方法,由外部的数据刷新方法调用结束后,通知我们的组件,数据已经加载完,并且重新渲染下拉处或者底部处的样式:

基于vue的下拉刷新指令和滚动刷新指令

我们在组件中,也建议在vue的nextClick中对该方法进行调用:

基于vue的下拉刷新指令和滚动刷新指令

这样,一个基本的下拉刷新和滚动刷新的指令也就实现了.

以上所述是小编给大家介绍的基于vue的下拉刷新指令和滚动刷新指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 #Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 #Javascript
You might like
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
JS原型链怎么理解
2016/06/27 Javascript
详解VUE 数组更新
2017/12/16 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python 画出来六维图
2019/07/26 Python
详解Python3 pandas.merge用法
2019/09/05 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
QQ空间主人寄语大全
2014/04/12 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
张丽莉观后感
2015/06/16 职场文书
个人工作决心书
2015/09/22 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书