移动端封装一个滚动加载的组件实现分页功能

在移动端项目中，用户通过向上滑动，加载列表数据，实现分页的功能。当总页数为1页或者是最后一页时候，底部显示“没有更多数据”字样，否则显示“滑动加载更多”的字样。
一、组件的封装
1、html

2、js
export default {
props: {
parentPullUpState: {
default: 0
},
onInfiniteLoad: {
type: Function,
require: false
}
},
components: {
// “van-loading”: Loading
},
data() {
return {
top: 0,
pullUpState: 0, // 1:向上加載更多, 2:加載中, 3:沒有更多數據了
isLoading: false, // 是否正在加载
pullUpInfo: {
moreText: “向上拖动加载下一页”,
noMoreText: “沒有更多数据了”
},
startX: 0,
startY: 0,
endX: 0,
endY: 0
};
},
methods: {
/**
* 触摸开始，手指点击屏幕时
* @param {object} e Touch 对象包含的属性
*/
touchStart(e) {
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
},

/**
 * 接触点改变，滑动时
 * @param {object} e Touch 对象包含的属性
 */
touchMove(e) {
  this.endX = e.changedTouches[0].pageX;
  this.endY = e.changedTouches[0].pageY;
  let direction = this.getSlideDirection(
    this.startX,
    this.startY,
    this.endX,
    this.endY
  );
  switch (direction) {
    case 0:
      // console.log('没滑动')
      break;
    case 1:
      // console.log('向上')
      this.scrollToTheEnd();
      break;
    case 2:
      // console.log('向下')
      break;
    case 3:
      // console.log('向左')
      break;
    case 4:
      // console.log('向右')
      break;
    default:
  }
},

/**
 * 触摸结束，手指离开屏幕时
 * @param {object} e Touch 对象包含的属性
 */
touchend(e) {
  this.isLoading = false;
},

/**
 * 判断滚动条是否到底
 */
scrollToTheEnd() {
  let innerHeight = document.querySelector(".load-moudle").clientHeight;
  // 变量scrollTop是滚动条滚动时，距离顶部的距离
  let scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  // 变量scrollHeight是滚动条的总高度
  let scrollHeight =
    document.documentElement.clientHeight || document.body.scrollHeight;
  // 滚动条到底部的条件
  if (scrollTop + scrollHeight >= innerHeight - 20) {
    if (this.pullUpState !== 3 && !this.isLoading) {
      this.infiniteLoad();
    }
    console.log('距顶部' + (scrollTop  + scrollHeight) + '内容高度' + innerHeight)
  }
},

/**
 * 上拉加载数据
 */
infiniteLoad() {
  if (this.pullUpState !== 0) {
    console.log('加载组件触发触发上拉加载数据')
    this.pullUpState = 2;
    this.isLoading = true;
    this.onInfiniteLoad();
  }
},

/**
 * 返回角度
 */
getSlideAngle(dx, dy) {
  return (Math.atan2(dy, dx) * 180) / Math.PI;
},

/**
 * 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
 * @param {number} startX X轴开始位置
 * @param {number} startY X轴结束位置
 * @param {number} endX Y轴开始位置
 * @param {number} endY Y轴结束位置
 */
getSlideDirection(startX, startY, endX, endY) {
  let dy = startY - endY;
  let dx = endX - startX;
  let result = 0;
  // 如果滑动距离太短
  if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
    return result;
  }
  let angle = this.getSlideAngle(dx, dy);
  if (angle >= -45 && angle < 45) {
    result = 4;
  } else if (angle >= 45 && angle < 135) {
    result = 1;
  } else if (angle >= -135 && angle < -45) {
    result = 2;
  } else if (
    (angle >= 135 && angle <= 180) ||
    (angle >= -180 && angle < -135)
  ) {
    result = 3;
  }
  return result;
}

},
watch: {
parentPullUpState: {
handler(curVal, oldVal) {
this.pullUpState = curVal;
},
// 代表在wacth里声明了Name这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
immediate: true
}
}
};
3、css

二、页面使用该组件