vue下拉触底，判断上滑下滑

下拉触底

常用参数

• scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、

• scrollTop（滚动条滚动距离）、

• clientHeight（窗口可视范围高度）。

• 当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。

在js里

scrollHeight：可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取;
clientHeight：可以通过window.innerHeight 、 document.documentElement.clientHeight 获取;
scrollTop：可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取;

vue里

// listDom 是在template里绑定的，用来表示当前元素
 // 文档内容的实际高度
      let blockScrollHeight = this.$refs['listDom'].scrollHeight;
      // 滚动条滚动高度
      let blockScrollTop =  this.$refs['listDom'].scrollTop;
      // 可视窗口高度
      let blockClientHeight =  this.$refs['listDom'].clientHeight;

上面参数，就足够应对大部分功能了

下面是三者的关系

判断上滑下滑

常用参数

• scrollTop（滚动条滚动距离）

// listDom 是在template里绑定的，用来表示当前元素
     // 滚动条滚动高度
     let blockScrollTop =  this.$refs['listDom'].scrollTop;

• 初始化一个变量，用来记录每次的scrollTop
• 用当前的scrollTop - 上次的scrollTop。
• 如果大于零，则代表向下滑动(因为向下滑动，当前的scrollTop是相比于上次的scrollTop是增大的，所以差值 大于零)
  – 如果小于零，则代表向上滑动(因为向上滑动，当前的scrollTop是相比于上次的scrollTop是减小的，所以差值 小于零)

data:{
return {
scroolCount: 0
}
}
const scroll = blockScrollTop - this.scroolCount;
this.scroolCount = blockScrollTop;
if(scroll < 0){
	console.log('向下滑动');
	this.$store.commit('scrollLockFlag', true);
 }