基于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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
js word表格动态添加代码
Jun 07 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
微信小程序用户授权最佳实践指南
May 08 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
js left,right,mid函数
2008/06/10 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
怎样使用Python脚本日志功能
2016/08/14 Python
Python命令行解析模块详解
2018/02/01 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
python求质数的3种方法
2018/09/28 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python excel转换csv代码实例
2019/08/26 Python
python实现文件的分割与合并
2019/08/29 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
店铺转让协议书(2014版)
2014/09/23 职场文书
整改报告格式
2014/11/06 职场文书
2014教师年度工作总结
2014/11/10 职场文书
土建施工员岗位职责
2015/04/11 职场文书
初中重阳节活动总结
2015/05/05 职场文书
介绍信范文大全
2015/05/07 职场文书