vue瀑布流组件上拉加载更多

最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。

首先简单写一下模板部分的html代码,，很简单清晰的逻辑：

<template>
  <div class="loadmore">
    <div class="loadmore__body">
      <slot></slot>
    </div>
    <div class="loadmore__footer">
      <span v-if="loading">
        <i class="tc-loading"></i>
        <span>正在加载</span>
      </span>
      <span v-else-if="loadable">上拉加载更多</span>
      <span v-else>没有更多了</span>
    </div>
  </div>
</template>

然后就是业务部分了

在动手写组件之前，先理清需求：

加载页面 -> 滑到底部 -> 上拉一定距离 -> 加载第二页 -> 继续前面步骤 -> 没有更多

这是一个用户交互逻辑，而我们需要将其映射为代码逻辑：

首屏自动加载第一页 -> 滑动到底部&&按下时候滑动距离Y轴有一定偏移量 -> 请求后端加载第二页 -> 根据返回字段判断是否还有下一页

有了代码逻辑，主干就出来了，加载和判断由事件来控制，而又作为一个vue组件，我们需要配合vue生命周期来挂载事件和销毁事件

export default {
    mounted() {
        // 确定容器
        // 容器绑定事件
    },
    beforeDestory() {
        //  解绑事件
    },
}

如果没有解绑的话，每次你加载组件，就会绑定一次事件…

然后我们需要一些核心事件回调方法来在合适的时间加载数据渲染页面, 回想一下，第一我们需要http获取数据的load函数，然后我们需要三个绑定事件的回调函数pointDown(), pointMove(), pointUp(),分别对应用户按下、移动、弹起手指操作：

基本上主干已经算完工了，一些props传入或者一些逻辑控制细节需要再额外添加，贴出整个组件的源码：