通过原生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 插件实现瀑布流图片展示实例
Apr 03 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
vue实现底部菜单功能
Jul 24 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 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如何透过ODBC来存取数据库
2006/10/09 PHP
浅谈PHP语法(1)
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Django项目创建及管理实现流程详解
2020/10/13 Python
python 进程池pool使用详解
2020/10/15 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
环境工程专业自荐信
2014/03/03 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
2016党校学习心得体会
2016/01/07 职场文书
python实现三次密码验证的示例
2021/04/29 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android