原理

想必使用過微信開發工具的應該都接觸過上拉加載下拉重繪配置，

原理呢就是通過根據當前剛開始觸碰的螢屏垂直y軸距離和滑動時所觸碰垂直y軸距離，從而來判斷是上拉，下拉，

實作

使用的vue2 封裝的組件，js大致思路是一樣的

父組件

<template>
  <div class="home">
    <pull-down-refresh
      :showLoadingRefresh="true"
      :PullDownSize="100"
      :PullUpSize="100"
      @PullUpHandle="PullUpHandle" 
      @PullDownHandle="PullDownHandle">
      <!-- 在組件的代碼區域會觸發下拉上拉操作 -->
      <h2>example</h2>
      <button @click="clickHandle">BUTTON</button>
    </pull-down-refresh>

  </div>
</template>

<script>
// 引入下拉組件
import PullDownRefresh from '../components/PullDownRefresh.vue'
export default {
  name: 'Home',
  components:{ PullDownRefresh },
  data(){
    return {}
  },
  methods:{
    PullUpHandle(value){
      // do something
      console.log(value);
    },
    PullDownHandle(value){
      // do something
      console.log(value);
    },
    clickHandle(){
      console.log(111);
    }
  }
}
</script>

<style lang="less" scoped>
  .home {
    width: 100%;
    height: 100%;
  }
</style>

子組件

<template>
  <div
    class="pull-down-refresh"
    @touchstart="startHandle"
    @touchmove="moveHandle"
    @touchend="endHandle"
  >
    <!-- <transition>
      <div :class="[isShowLoading?'h':'','loading-refresh']" v-show="isShowLoading"><img src="../assets/loading.png"></div>
    </transition> -->
    <!-- slot插槽 在內部可執行的代碼塊 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "PullDownRefresh",
  props:{
    PullDownSize:{ // 父級組件傳過來的下拉需求尺寸，默認100
      type:Number,
      default:100
    },
    PullUpSize:{ // 父級組件傳過來的上拉需求尺寸，默認100
      type:Number,
      default:100
    },
    // showLoadingRefresh:{
    //   type:Boolean,
    //   default:false
    // }
  },
  data(){
    return {
      isPullDown:false, // 判斷是否是下拉操作
      startY:'', // 開始觸摸的距離尺寸
      resultY:'', // 最終的距離尺寸 = 開始尺寸 - 移動移動，小于0位下拉，大于0位上拉
      // isShowLoading:false,  // loading 影片是否展示
    }
  },
  methods: {
    startHandle(e) {
      // 每開始的第一次觸碰，記錄初始的垂直距離尺寸
      this.startY = e.touches[0].clientY
    },
    moveHandle(e) {
      // 觸摸滑動的時候用來計算最終的距離尺寸
      this.resultY = this.startY - e.touches[0].clientY
      // 上拉 ————> 最終的距離是大于0的，最初距離 - 向上滑動的距離 > 0 ，向上滑動的時候尺寸距離比原來的尺寸距離要小
      // 下拉 ————> 反之，向下滑動的尺寸比原來的尺寸大
      if(this.resultY > 0){
        this.isPullDown = false  // pull up
      }else {
        this.isPullDown = true  // pull down
      }
    },
    endHandle() {
      if(!this.resultY){ // 判斷最終的距離尺寸是否不成立不存在
        return
      }
      // 判斷當前是否為下拉，為false是上拉操作，并且判斷是否滿足對于上拉的需求尺寸條件，滿足條件執行
      if(this.isPullDown == false && this.resultY >= this.PullUpSize){
        this.$emit('PullUpHandle','你好我...，我正在觸發上拉加載操作')
      }
      // 下拉的尺寸是<0的，通過絕對值 Math.abs(this.resultY) 將原來的最終尺寸與需求尺寸對比
      if(this.isPullDown && Math.abs(this.resultY) >= this.PullDownSize) {
        this.$emit('PullDownHandle','你好我...，我正在觸發下拉重繪操作')
        // if(this.showLoadingRefresh){
        //   this.isShowLoading = true
        //   setTimeout(() => {
        //     this.isShowLoading = false
        //   },500)
        // }
      }
      this.resultY = 0
      this.isPullDown = false
      // 最終再將其復位
    },
  },
};
</script>

<style scoped>
.pull-down-refresh {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.loading-refresh {
  width: 100%;
  height: 0px;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .5s linear;
}
.loading-refresh img {
  height: 100%;
  width: auto;
  transform: scale(.6);
}
.h {
  height: 40px;
}
.v-enter,.v-leave-to{
        opacity: 0;
        /* transform: translateX(80px); */
    }
     .v-enter-active,.v-leave-active{
        
        transition: all 0.5S ease
    }
</style>

效果

添加上loading樣式