通过原生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的一些注意
Dec 06 Javascript
js里的prototype使用示例
Nov 19 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
详解express使用vue-router的history踩坑
Jun 05 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实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
python怎么调用自己的函数
2020/07/01 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
行政文员岗位职责
2013/11/08 职场文书
销售经理工作职责范文
2013/12/03 职场文书
工地资料员岗位职责
2013/12/31 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
《识字五》教学反思
2014/03/01 职场文书
校运会口号
2014/06/18 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
感恩父母主题班会
2015/08/12 职场文书