vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据)
1:钩子函数监听滚动事件:
mounted () {
this.$nextTick(function () {
window.addEventListener('scroll', this.onScroll)
})
},
2:
methods: {
// 获取滚动条当前的位置
getScrollTop () {
var scrollTop = 0
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
} else if (document.body) {
scrollTop = document.body.scrollTop
}
return scrollTop
},
// 获取当前可视范围的高度
getClientHeight () {
var clientHeight = 0
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
}
return clientHeight
}, // 获取文档完整的高度
getScrollHeight () {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
},
// 滚动事件触发下拉加载
onScroll () {
if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 0) {
if (this.status === 1) {
this.status = 0
// 页码,分页用,默认第一页
this.deliverParams.page += 1
// 调用请求函数
alert('触发!!!')
}
}
},
}
vue 中监测滚动条加载数据(懒加载数据)的更多相关文章
- vue中页面卡顿,使用懒加载
为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的imp ...
- js中的预加载与懒加载(延迟加载)
js中加载分两种:预加载与延迟加载 一. 预加载,增强用户的体验,但会加载服务器的负担.一般会使用多种 CSS(background).JS(Image).HTML(<img />) . ...
- Android中ViewPager+Fragment取消(禁止)预加载延迟加载(懒加载)问题解决方案
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53205878本文出自[DylanAndroid的博客] Android中Vie ...
- JPA数据懒加载LAZY配合事务@Transactional使用(三)
上篇博文<JPA数据懒加载LAZY和实时加载EAGER(二)>讲到,如果使用懒加载来调用关联数据,必须要保证主查询session(数据库连接会话)的生命周期没有结束,否则,你是无法抽取到数 ...
- JPA数据懒加载LAZY和实时加载EAGER(二)
懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载,懒加载是在属性被引用时,才生成查询语句,抽取相关联数据.而实时加载则是执行完主查询后,不管是否 ...
- JPA数据懒加载LAZY和实时加载EAGER(转)
原文:https://www.cnblogs.com/MrSi/p/8081811.html 懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载, ...
- vue中关于滚动条的那点事
vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...
- mybatis_12延时加载_懒加载
延时加载:也叫懒加载 2.1 延迟加载 延迟加载又叫懒加载,也叫按需加载.也就是说先加载主信息,在需要的时候,再去加载从信息. 在mybatis中,resultMap标签 的association标签 ...
- webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等.总之,就是在SPA,把JS代码分成N个页面 ...
随机推荐
- VUE新版扫码下单必选分类设置FAQ
使用场景:商家想要设置某些分类下的商品设置必选,否则不能下单.如某火锅店,商家想要设置汤底这个分类下的商品,顾客扫码下单的时候必须选择一份才能下单,此时 就可以使用这个功能 配置步骤和注意事项如下: ...
- VSCode 下载Models 报错
VSCode调试部分代码时,报错,提示不能自动获取Models.报错信息如下. go: golang.org/x/crypto@v0.-80db560fac1f: unrecognized impor ...
- vcenter 忘记 administrator@vsphere.local 密码怎么办
现有一个windows版本的vcenter5.5管理员密码丢失,我们可以使用vmware的工具vdcadmintool,在命令行进入到vdcadmintool所在的目录,然后执行下vdcadminto ...
- composer包(发布到github上)同步到Packagist
在上一篇文章里面,探讨了如何一步步建立composer包–创建你的一个composer包 创建完成后,我们需要做的就是讲自建的包发布到Packagist上.至于说什么是Packagist,这个就不用我 ...
- 解决在使用gensim.models.word2vec.LineSentence加载语料库时报错 UnicodeDecodeError: 'utf-8' codec can't decode byte......的问题
在window下使用gemsim.models.word2vec.LineSentence加载中文维基百科语料库(已分词)时报如下错误: UnicodeDecodeError: 'utf-8' cod ...
- 基于Linux下catalog方式的 Oracle 备份策略(RMAN)
--********************************** -- 基于Linux下 Oracle 备份策略(RMAN) --******************************* ...
- 使用栈实现队列(2)(Java)
class MyQueue { private Stack s1; private Stack s2; public MyQueue(int size) { this.s1 = new Stack(s ...
- ThinkPad T400 键帽下面的X支架的安装方法
有一台古老的T400,清理键盘的时候,X支架老化断了,淘宝买了几个支架,研究一下安装方法: 1.注意支架方向:上面是横向的细支架,下面是两个小孔2.用小螺丝刀把下面的两个小孔推进键盘下面的两个金属钩里 ...
- MVC 全局过滤器
1. 新创建一个类 CheckLogin2. 在类中加入以下代码 public class CheckLogin : ActionFilterAttribute { public override v ...
- Visual Studio Code扩展:
Auto Close TagAuto Rename TagBeautifyChinese (Simplified) Language Pack for Visual Studio CodeClass ...