下拉刷新上拉加载

原理

想必使用过微信开发工具的应该都接触过上拉加载下拉刷新配置。

原理呢就是通过根据当前刚开始触碰的屏幕垂直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样式