vue.js监听滚动条加载更多数据
来源:互联网 发布:淘宝订购服务怎么退款 编辑:程序博客网 时间:2024/06/08 18:55
一、需要参数
当要求页面根据滚动条增加更多数据,首先需要三条数据:
1、参考线位置lineHeight:即判断滚动到何处触发事件;
2、页面卷入的高度scrollHeight;
3、浏览器窗口的高度windowHeight。
lineHeight
lineHeight分析:当页面首次登录的时候已经加载第一页数据,记录第一页数据参考线的高度firstPageH(例如:700),计算每页增加数据的高度pageH(例如:930),当增加第N页数据时参考线的高度位置: lineHeight=firstPageH+pageH*N;
scrollHeight
scrollHeight分析:document.body.scrollTop
windowHeight
windowHeight分析:$(window).height()
二、vueJs created监听事件
vue的生命周期图
当窗口滚动到参考线是添加滚动事件
…… mounted:function(){ //相关操作 }, created(){ var _this=this; $(window).scroll(function(){ var lineHeight=700+930*_this.pageSN; //默认第一页时 _this.pageSN=1; var windowHeight=$(window).height(); var scrollTop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(scrollTop+windowHeight>=lineHeight){ _this.pageSN++; _this.goPage(_this.pageSN); // 执行增加页面数据操作 } }); },
页面常见高度、宽度相关计算
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
//jQuery函数
- vue.js监听滚动条加载更多数据
- vue 2 滚动条加载更多数据实现
- vue.js 列表数据加载更多
- JS滚动条到网页底部自动加载更多内容
- vue中实现滚动加载更多
- 滚动条监听-懒加载
- js实现滚动条边滚动边加载数据
- js当滚动条即将到达底部自动加载数据
- JQuery滚动加载更多数据实例
- AngularJS应用-滚动加载更多数据
- jquery滚动条加载数据
- 拖动滚动条加载数据
- js监听滚动条滑动到底部
- 监听滚动条js的操作
- js监听滚动条向上还是向下
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
- jquery.autocomplete 插件扩展滚动条加载更多
- 基于jq 滚动条到底加载更多的方法
- 问题总结
- ES6学习——class到底是个啥
- 常用算法——贪婪
- 以图搜视频的两篇短论文(Stanford)
- EL表达式
- vue.js监听滚动条加载更多数据
- 彻底弄懂css中单位px和em,rem的区别
- 关于lower_bound与upper_bound的实用技巧
- SpringBoot(1)--------helloworld
- SpringMVC 文件上传:org.springframework.web.multipart.commons.CommonsMultipartFile
- PyCharm工具下调试scrapy
- 开启tomcat的apr模式,并利用redis做tomcat7的session的共享。
- [HNOI2012]矿场搭建 点双连通分量
- 使用YASM编程