文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-05-14 22:33

关注

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

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

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

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

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

从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
    }
  }

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯