滚动加载
来源:互联网 发布:淘宝主图视频大小限制 编辑:程序博客网 时间:2024/06/04 20:59
滚动加载计算时需要的参数
//滚动条在Y轴上的滚动距离export function getScrollTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document.body) { bodyScrollTop = document.body.scrollTop; } if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop;}//文档的总高度export function getScrollHeight() { var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; if (document.body) { bodyScrollHeight = document.body.scrollHeight; } if (document.documentElement) { documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight;}//浏览器视口的高度export function getWindowHeight() { var windowHeight = 0; if (document.compatMode == "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } return windowHeight;};
滚动加载的计算依据
// 滚动条在Y轴上的滚动距离 + 浏览器视口的高度 === 文档的总高度if(getScrollTop + getWindowHeight === getScrollHeight){ // 执行滚动加载的函数}
在此博主记录下 遇到的问题 以及解决方法滚动加载中应为监听滚动条滚动距离 所以在滚动到底部时会出现发送多次请求加载的数据量不是一屏的数据
这个问题的解决方式
博主是使用vue框架来开发的 所以 你懂的………….vuex喽
默认状态是true 允许滚动加载
vuex 中 的处理方式
在state中的处理方式
allowLoad:true
在判断滚动加载的时候 是这样处理的
if(this.$store.state.allowLoad){ if(getScrollTop + getWindowHeight === getScrollHeight){ // 执行滚动加载的函数 this.$store.dispatch('loadlabfeed', opts); }}
在actions中的处理
loadlabfeed(context, opts){// 发送请求前将允许滚动判断置为false就不会出触发送请求方法context.commit('notAllowload', false)axios.get('你的请求url').then((response) =>{ if(response.status === 200){ // 请求发送成功后将允许滚动判断置为true允许滚动加载 context.commit('notAllowload', true) }})}
在mutations中的处理
notAllowload(state, payload){ state.allowLoad = payload}
阅读全文
1 0
- 滚动加载
- 滚动加载
- 滚动加载
- ListView 滚动翻页/滚动加载
- ListView滚动翻页/滚动加载
- 随滚动加载图片
- 滚动加载数据
- 滚动加载完整代码
- js 滚动加载
- 滚动加载页面
- js滚动无限加载
- 滚动动态加载图片
- 滚动加载更多内容
- 滚动加载页面
- js滚动加载图片
- js滚动加载内容
- ListView 滚动加载数据
- 滚动加载更多
- vim编辑器常用的基本使用方式
- springMvc四种处理器映射器之二:SimpleUrlHandlerMapping
- 深复制和浅复制
- Android java 遍历Map的四种方法
- 生产者和消费者线程实现
- 滚动加载
- BZOJ 1787 [Ahoi2008]Meet 紧急集合 题解
- INSTALL_FAILED_PERMISSION_LEVEL_DOWNGRADE
- LeetCode
- 八种排序算法Java实现-堆排序
- 将文件从服务器上cp到另一个服务器
- Find them, Catch them 带权并查集
- 机器学习应用的短板
- 文件转码