vue2实现带有阻尼下拉加载的功能

目录 在vue中 需要绑定触发的事件 需要使用的变量

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

<div
  id=" test c hat Box"
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + 'px'}"
  @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.t arg etTouches[0].pageY可以拿到手指按下的 y轴点
  this.startY = e.targetTouches[0].pageY
  // 开启下拉刷新状态
  this.isMove = false
  this.pageScrollTop = document.documentElement & am  p; amp;& 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
    }
  }

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

您可能感兴趣的文章: Vue移动端下拉加载更多数据onload实现方法浅析 vue 使用mescroll.js框架实现下拉加载和上拉刷新功能 Vue实现下拉加载更多 Vue记住滚动条和实现下拉加载的完美方法 vue实现下拉加载其实没那么复杂

总结

以上是 为你收集整理的 vue2实现带有阻尼下拉加载的功能 全部内容，希望文章能够帮你解决 vue2实现带有阻尼下拉加载的功能 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue2实现带有阻尼下拉加载的功能的详细内容...