滚动加载

滚动加载计算时需要的参数

//滚动条在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
}