下拉刷新上拉加载

Posted 2022-02-01 凯特霖

目录

• 原理
• 实现
• 效果

原理

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

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