vue2 がダンピングを備えたプルダウン読み込み関数を実装する方法については、記事で詳しく説明しています。

この記事は、vue2 に関する関連知識を提供します。主に、減衰プルダウン読み込み機能が vue2 にどのように実装されているかについて説明します。興味のある友人は、見てみましょう。皆さんが協力してくれることを願っています。

vue では、トリガーされたイベントをバインドする必要があります

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

コード スニペットでは 3 つのコールバック関数を使用します:

• touchstart: 指が画面に触れた瞬間

• touchmove: 指が画面上を移動した瞬間

• touchend:指が画面を離れるとき

paddingTop からわかるように、コンテナーの距離の上部のパディングを制御することでドロップダウン効果を実現します。したがって、再調整は、上記の 3 つのコールバック関数を通じて chatScrollTop の値を決定することです。

chatScrollTop という名前から、プルダウンの更新がチャット ボックス コンテナーで使用されていることがわかります。

これらの変数を使用する必要があります:

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

3 つのコールバック関数は 3 つの段階に対応しており、コア コードも 3 つの部分に分かれています。

最初の部分: 現在のコンテナの上部からの距離を初期化し、現在スライド状態にあるかどうかを初期化し、現在のスクロールバーの縦座標。

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 中国語 Web サイトの他の関連記事を参照してください。