Vue混入mixins滚动触底的方法


Posted in Javascript onNovember 22, 2019

前言

在app端常常看到类似加载数据的动画,接下来我们来实现滚动触底加载动画提示,以及如何复用这些逻辑。

Vue混入mixins滚动触底的方法

如何判断滚动触底

来看下几张图:

情况一:

当文档高度还为超过可视区域高度时,不存在滚动,所以也没有滚动触底

Vue混入mixins滚动触底的方法 

情况二:

当文档高度超过可视区域的高度时,还有剩余的文档没有滚动完,也就是说 可视区域高度 + 滚动高度 < 文档高度 ,此时没有达到滚动触底的条件

Vue混入mixins滚动触底的方法 

情况三:

文档高度大于可视区域,并且滚动到文档底部, 也就是说 可视区域高度 + 滚动高度 = 文档高度

Vue混入mixins滚动触底的方法 

判断是否滚动到底

经过上面三种情况的分析,我们需要拿到 可视区域的高度 , 滚动高度 , 文档高度 这三个变量来进行比较。

可视区域的高度

function getWindowHeight() {
 return document.documentElement.clientHeight;
}

滚动高度

对有doctype申明的页面使用document.documentElement.scrollTop,safari特例独行:使用 window.pageYOffset

function getScrollHeight() {
 return Math.max(document.documentElement.scrollTop,window.pageYOffset||0)
}

文档高度

function getDocumentTop() {
 return document.documentElement.offsetHeight;
}

代码实现

触底打印

最后

将滚动触底的逻辑和 UI 都集成到 scroll.js 中,复用都方式可以放在 mixins 可以抽离成 v-directive,这样我们可以接受到绑定的 dom 不仅仅可以做 window 的滚动触底事件的判断,也可以 实现单个元素的滚动事件触底的监听 。后续可以在实现 v-directive 的版本。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
超简单的微信小程序轮播图
Nov 22 #Javascript
微信小程序实现Swiper轮播图效果
Nov 22 #Javascript
Js代码中的span拼接问题解决
Nov 22 #Javascript
微信小程序商品详情页底部弹出框
Nov 22 #Javascript
小程序实现图片预览裁剪插件
Nov 22 #Javascript
Vue数据双向绑定底层实现原理
Nov 22 #Javascript
Node如何后台数据库使用增删改查功能
Nov 21 #Javascript
You might like
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
bootstrap table小案例
2016/10/21 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
浅谈vue 单文件探索
2018/09/05 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python将list转为matrix的方法
2018/12/12 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
行政总监岗位职责
2013/12/05 职场文书
教学评估实施方案
2014/03/16 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
新教师教学工作总结
2015/08/12 职场文书
安全生产标语口号
2015/12/26 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
python实现图片批量压缩
2021/04/24 Python
php访问对象中的成员的实例方法
2021/11/17 PHP
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript