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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
超简单的微信小程序轮播图
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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP重定向的3种方式
2013/03/07 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JavaScript For Beginners(转载)
2007/01/05 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Python的gevent框架的入门教程
2015/04/29 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
详解python中list的使用
2019/03/15 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
电大自我鉴定范文
2013/10/01 职场文书
信息管理专业自荐书
2014/06/05 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
在校生证明
2015/06/17 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
我的收音机情缘
2022/04/05 无线电