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> 

這樣，基本就做完了，