通过原生vue添加滚动加载更多功能


Posted in Javascript onNovember 21, 2019

这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。

mounted () {
  window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll)
},

定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度,在加载后如果列表长度为0时应该停止加载,要不会出现一直加载的情况

handleScroll () {
    //变量scrollTop是滚动条滚动时,距离顶部的距离
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //变量windowHeight是可视区的高度
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //变量scrollHeight是滚动条的总高度
    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop+windowHeight==scrollHeight &&this.list.length !==0){
      this.loadMore() // 加载的列表数据
    }
  }

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

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
jQuery 加上最后自己的验证
Nov 04 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
小程序api实现promise封装过程解析
Nov 21 #Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 #Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 #Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 #Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 #Javascript
webpack常用构建优化策略小结
Nov 21 #Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 #Javascript
You might like
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php实现zip文件解压操作
2015/11/03 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
学习Node.js模块机制
2016/10/17 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
python 日期操作类代码
2018/05/05 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
如何写一封打动人心的求职信
2014/02/17 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
重阳节标语大全
2014/10/07 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
2015年女生节活动总结
2015/02/27 职场文书
教师节主持词开场白
2015/05/29 职场文书
让生命充满爱观后感
2015/06/08 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python