기사에서는 vue2가 댐핑을 사용하여 풀다운 로딩 기능을 구현하는 방법을 자세히 설명합니다.

이 글은 vue2에 대한 관련 지식을 제공합니다. vue2에서 감쇠 풀다운 로딩 기능이 어떻게 구현되는지에 대해 주로 설명합니다. 관심 있는 친구들이 함께 살펴보시면 좋습니다. 도움이됩니다.

vue에서 트리거된 이벤트는 바인딩되어야 합니다.

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

코드 조각은 세 가지 콜백 함수를 사용합니다.

• touchstart: 손가락이 화면을 터치하는 순간

• touchmove: 손가락이 켜져 있는 시점 Moving on the screen

• touchend: 손가락이 화면을 떠날 때

paddingTop에서 볼 수 있듯이 컨테이너 거리 상단의 padding을 조절하여 드롭다운 효과를 구현합니다. 그래서 우리의 재조정은 위의 세 가지 콜백 함수를 통해 chatScrollTop의 값을 결정하는 것입니다.

chatScoollTop이라는 이름에서 알 수 있듯이 채팅 상자 컨테이너에서 풀다운 새로 고침이 사용됩니다.

다음 변수를 사용해야 합니다.

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

세 가지 콜백 함수는 세 단계에 해당하며 핵심 코드도 다음과 같습니다.

1부: 현재 컨테이너 상단까지의 거리를 초기화하고, 현재 슬라이딩 상태인지 여부를 초기화하고, 현재 스크롤 막대의 세로 좌표를 가져옵니다.

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

2부: 현재 손가락의 현재 거리와 화면을 터치하는 순간의 세로좌표 차이를 기준으로 컨테이너와 상단 사이의 거리를 결정합니다. 하지만 항상 미끄러지지는 못하기 때문에 0 -> 80 분위기를 줍니다. 슬라이딩을 더욱 재미있게 만들기 위해 슬라이딩 거리 비율을 조정하는 단계 값이 추가되었습니다. 소위 거리 비율은 손가락이 처음부터 멀어질수록 용량이 슬라이딩하는 거리가 짧아진다는 것을 의미합니다. 댐핑과 같은 효과를 얻을 수 있습니다.

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

3부: 손가락을 뗀 후 위에서부터 일정 거리를 주어 로딩 스크롤바를 추가합니다.

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

추천 학습: "vue.js 비디오 튜토리얼"

위 내용은 기사에서는 vue2가 댐핑을 사용하여 풀다운 로딩 기능을 구현하는 방법을 자세히 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!