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{
     width: 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> 

这样，基本就做完了，