Satu artikel menerangkan secara terperinci cara vue2 melaksanakan fungsi pemuatan tarik-turun dengan redaman

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue2 terutamanya tentang cara fungsi pemuatan tarik-turun yang dilembapkan di vue2, mari lihat.

Dalam vue, peristiwa yang dicetuskan perlu diikat

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

Coretan kod menggunakan tiga fungsi panggil balik:

• mula sentuh: Apabila jari menyentuh skrin

• gerakan sentuh: Apabila jari bergerak pada skrin

• sentuh : Apabila jari meninggalkan skrin

Seperti yang dapat dilihat dari paddingTop, kami mencapai kesan lungsur turun dengan mengawal padding di bahagian atas jarak bekas. Jadi pelarasan semula kami adalah untuk menentukan nilai chatScrollTop melalui tiga fungsi panggil balik di atas.

Anda boleh tahu daripada nama chatScrollTop bahawa muat semula tarik turun kami digunakan dalam bekas kotak sembang

Kami perlu menggunakan pembolehubah ini:

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

Tiga. panggilan balik Fungsi sepadan dengan tiga peringkat dan kod teras kami juga dibahagikan kepada tiga bahagian:

Bahagian pertama: mulakan jarak dari bahagian atas bekas semasa dan mulakan sama ada ia berada dalam keadaan gelongsor pada masa ini , dan dapatkan ordinat bar skrol semasa.

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

Bahagian 2: Tentukan jarak antara bekas dan bahagian atas berdasarkan perbezaan ordinat antara jarak semasa jari semasa dan saat ia menyentuh skrin. Tetapi kerana ia tidak boleh meluncur sepanjang masa, ia memberikan suasana 0 -> 80. Untuk menjadikan gelongsor lebih menarik, nilai langkah ditambah untuk melaraskan nisbah jarak gelongsor Nisbah jarak yang dipanggil bermakna semakin jauh jari dari awal, semakin pendek jarak yang akan diikuti oleh kapasiti untuk meluncur. Mencapai kesan seperti redaman.

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

Bahagian 3: Selepas melepaskan jari anda, berikan jarak dari atas untuk menambah bar skrol memuatkan.

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

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Satu artikel menerangkan secara terperinci cara vue2 melaksanakan fungsi pemuatan tarik-turun dengan redaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!