一文详解vue2如何实现带有阻尼下拉加载功能

本篇文章给大家带来了关于vue2的相关知识，其中主要跟大家聊一聊带有阻尼下拉加载的功能是怎么在vue2中实现的，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。

在vue中，需要绑定触发的事件

<div
  id="testchatBox"
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + &#39;px&#39;}"
  @touchstart="touchStart" 
  @touchmove="touchMove"
  @touchend="touchEnd">
</div>

代码片段使用到了三个回调函数：

touchstart: 手指触摸到屏幕的那一刻的时候
touchmove: 手指在屏幕上移动的时候
touchend: 手指离开屏幕的时候

从paddingTop可以看出，我们是通过控制这个容器距离的顶部的padding来实现下拉的效果。所以说我们的重调就是通过上面的三个回调函数来确定chatScroollTop的值。

通过chatScroollTop 这个命名就可以知道，我们这个下拉刷新是用在聊天框容器当中.

我们需要使用这些变量：

data() {
  return {
    chatScroollTop: 0, // 容器距离顶部的距离 
    isMove: false, // 是否处于touchmove状态
    startY: 0, // 当前手指在屏幕中的y轴值
    pageScrollTop: 0, // 滚动条当前的纵坐标
    
  }
}

三个回调函数对应三个阶段，而我们核心代码也分为三个部分：

第一部分：初始化当前容器的到顶部的距离,以及初始化当前是否处于滑动的状态,并获取当前滚动条的纵坐标。

touchStart(e) {
  // e代表该事件对象，e.targetTouches[0].pageY可以拿到手指按下的 y轴点
  this.startY = e.targetTouches[0].pageY
  // 开启下拉刷新状态
  this.isMove = false
  this.pageScrollTop = document.documentElement && document.documentElement.scrollTop
}

第二部分：根据当前手指当前距离触摸屏幕时刻的纵坐标差来确定容器和顶部的距离。但是由于不能一直的滑动，所以给了一个0 -> 80的氛围。为了让滑动更加的有趣，添加了一个step步进值来调整滑动的距离比例，所谓的距离比例就是手指距离一开始的距离越远，那么容量跟着滑动的距离就越短。实现一个类似阻尼的效果。

touchMove(e) {
  // 这个 touchMove，只要页面在动都会发生的，所以 touching就起作用了
  // 获取移动的距离
  let diff = e.targetTouches[0].pageY - this.startY
  let step = 60
  if (diff > 0 && diff < 80 && this.pageScrollTop === 0) {
     step++ // 越来越大
     this.chatScroollTop += (diff / (step * 0.1)) // 越向下给人的阻力感越大
     this.isMove = true
  }
}

第三部分：手指松开之后，给一个距离顶部的距离是为了添加加载滚动条。

  touchEnd() {
    if(this.isMove) {
      this.chatScroollTop = 40
      this.downCallback() // api拉取数据
    }
  }
  async downCallback() {
    try {
       // 拿数据 
    } catch() {} 
    finall{
      this.chatScrollTop = 0
    }
  }

推荐学习：《vue.js视频教程》

以上就是一文详解vue2如何实现带有阻尼下拉加载功能的详细内容，更多请关注其它相关文章！