vue.js监听滚动条加载更多数据
2017-09-12 18:21
543 查看
一、需要参数
当要求页面根据滚动条增加更多数据,首先需要三条数据:1、参考线位置lineHeight:即判断滚动到何处触发事件;
2、页面卷入的高度scrollHeight;
3、浏览器窗口的高度windowHeight。
lineHeight
lineHeight分析:当页面首次登录的时候已经加载第一页数据,记录第一页数据参考线的高度firstPageH(例如:700),计算每页增加数据的高度pageH(例如:930),当增加第N页数据时参考线的高度位置: lineHeight=firstPageH+pageH*N;scrollHeight
scrollHeight分析:document.body.scrollTopwindowHeight
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函数
(window).height();//浏览器当前窗口可视区域高度(document).height(); //浏览器当前窗口文档的高度
(document.body).height();//浏览器当前窗口文档body的高度(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin
(window).width() //浏览器当前窗口可视区域的宽度(document).width()//浏览器当前窗口文档的宽度
(document.body).width() //浏览器时下窗口文档body的高度(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding
相关文章推荐
- vue.js中滚动条加载更多数据
- vue.js 列表数据加载更多
- vue.js 表格分页ajax 异步加载数据
- js实现滚动条边滚动边加载数据
- vue 纯js监听滚动条到底部的实例讲解
- 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
- JS实现GridView式的数据加载(带滚动条)
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- js 根据滚动条加载数据
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
- Vue项目--用iscroll.js+pullToRefresh.js实现上拉加载更多、下拉刷新
- 使用 Vue.js 实现加载更多功能
- 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
- 使用Vue.Js结合Jquery Ajax加载数据的两种方式
- layui监听select下拉框获取数据通过doT.js加载页面多选框
- 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
- js/jq控制页面动态加载数据,滑动滚动条自动加载事件
- Javascript vue.js表格分页,ajax异步加载数据