vue 上拉刷新组件

　　背景，项目中经常会出现需要上拉加载更多或者下拉刷新的需求，一直以来呢都是借用各种UI库来实现，但是不知道啥情况，最近在使用的时候，一直有问题，出不了效果，然人很恼火，于是只能自己动手来实现以下，

　　这次做得呢也很简单，只做了上拉加载更多，思路其实很简单，搞一个组件，然后弄个插槽暴露出去放列表，然后在这个组件上监听touchstart，move,end等事件

　　我们一般只需要已经滑到最底部了，在上滑才需要判断是否加载更多

　　所以我们需要弄清楚几个条件

　　1，是否滑动到最底部了，如果是的话，那么在监听到上滑，就计算滑动的距离，如果距离达到了阈值，那么就加载更多

　　　　在处理加载的过程中，一般会给一些文字提示，比如，login中，已经没有更多了，...

　　2，如果没有滑动到最底部，那么就是普通的页面滑动，我们不做处理

　　大体上就是这些，大部分其他的库会有一些动画效果，我这里没加，具体代码如下：

　　

<template>
    <div class="pull-wrap" @touchstart="start" @touchmove="move" @touchend="end">
    <!--上拉加载组件-->
      <slot ref="pull" class="pull-content"></slot>
      <p v-if="isMoving" style="font-size: 20px;">pulling....</p>
      <div class="is-loading" v-if="isLoading">
        <img class="loading" src="../assets/images/loading.svg" alt="">
      </div>
      <div class="is-done" v-if="isDone">没有数据了</div>
  </div>
</template>

<script>
  export default {
    name: 'Pull',
    props: {
      onPull: {  // 上拉的回调
        type: Function,
        require: true
      }

    },
    data() {
      return {
        startY: 0,
        moveY: 0,
        isMoving: false,
        isLoading: false,
        isDone: false,
        num: 1  // history list的页数
      }
    },
    methods: {
      start(e) {
        this.startY = e.touches[0].clientY;
        console.log(this.startY);
      },
      move(e) {
        if (this.isDone) return
        console.log('move', e.touches[0].clientY);
        // 滑动时需要检测是否到底了，如果还没到底，就不要loading
        // if (this.isLoading || this.isDone) return;
        let flag = this.scrollToTheEnd();
        if (flag) {
          this.isMoving = true
        }
        this.moveY = e.touches[0].clientY - this.startY;
      },

      end() {
        // this.isMoving = false
        if (this.isLoading || this.isDone) return;
        console.log('touchend', this.moveY);
        if (this.moveY > -40) {
          console.log('没超过', this.moveY);
          this.isMoving = false;
        } else {
          console.log('达到条件了');
          let flag = this.scrollToTheEnd();
          console.log(flag, '到底了吗');
          if (!flag) return;
          this.isMoving = false
          this.num++;
          this.isLoading = true;
          this.onPull(this.num);
        }
        this.startY = 0;
        this.moveY = 0;
      },

      /**
       * 判断滚动条是否到底
       */
      scrollToTheEnd() {
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop // 滚动的距离
        let viewHeight = document.documentElement.clientHeight;  // 可视区域高度
        let offsetHeight = document.body.scrollHeight;  // 总高度
        console.log(scrollTop, viewHeight, offsetHeight, '----------------');
        // 滚动条到底部的条件
        return (viewHeight + scrollTop) >= offsetHeight
      }
    },

    mounted() {
      this.$on('loadEnd', () => {
        console.log('load完毕了');
        this.isLoading = false
      })

      this.$on('loadOver', () => {
        console.log('没有了');
        this.isDone = true;
        this.isLoading = false;
        this.isMoving = false;
      })

    }
  }
</script>

<style scoped lang="scss">
  /*.pull-wrap{
    overflow: hidden;
    &>.pull-content{
     transition: all .4s;
   }
  }*/
  .pull-wrap{
    font-size: 20px;
  }

  .loading{
     50px;
    height: 50px;
  }

</style>

然后使用组件的如下：

<template>
  <Pull :onPull="pull" ref="pull">
          <p v-for="val in list">列表了{{val}}</p>p
    </Pull>
</template>  

<script>
import Pull from '../Pull'
methods:{

//这里就是加载更多的处理函数了，这里只是用定时器模拟了一下，需要将加载状态回传到子组件中去
 pull(num) {
        console.log('pull回调');
        setTimeout(() => {
          this.num = num;
          if (this.history_list.length >= this.pk_list_data.others_family_list.length) {
            console.log('完了');
            this.$refs.pull.$emit('loadOver') // 加载完毕
          } else {
            this.$refs.pull.$emit('loadEnd') // 加载完毕
          }

        }, 2000)

      },

}

</script> 

这样，基本就做完了，