通过原生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 相关文章推荐
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
小程序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
使用PHP批量生成随机用户名
2008/07/10 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP队列用法实例
2014/11/05 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
详解JS函数重载
2014/12/04 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
数控专业推荐信范文
2013/12/02 职场文书
小学敬老月活动方案
2014/02/11 职场文书
个人授权委托书
2014/04/03 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
Python实现批量自动整理文件
2022/03/16 Python