Bagaimana untuk mengesan hentian gelongsor dalam vue

Dalam pembangunan bahagian hadapan, trend penggunaan halaman mudah alih meningkat secara beransur-ansur Pada masa yang sama, kaedah operasi terminal mudah alih juga berbeza daripada terminal PC telah menjadi salah satu operasi yang paling kerap digunakan oleh pengguna . Gelongsor bukan sahaja digunakan semasa menyemak imbas web, tetapi juga biasa digunakan dalam pelbagai aplikasi, seperti membaca berita, menyemak imbas produk, menonton video, dll. Oleh itu, cara mengesan hentian gelongsor dengan berkesan telah menjadi masalah yang diperlukan oleh ramai jurutera hadapan. untuk menyelesaikan.

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa kini, dan semakin ramai pembangun menggunakan Vue untuk pembangunan mudah alih. Artikel ini akan memperkenalkan cara menggunakan Vue untuk mengesan hentian gelongsor.

1. Pengenalan kepada acara gelongsor

Dalam pembangunan mudah alih, kami terutamanya menggunakan dua acara untuk mengesan gelongsor: touchstart dan touchmove. Apabila jari menyentuh skrin, peristiwa permulaan sentuh dicetuskan; apabila jari meluncur pada skrin, peristiwa gerakan sentuh dicetuskan. Kita boleh mendapatkan arah dan jarak gelongsor dengan mendengar dua peristiwa ini dan mendapatkan maklumat koordinat jari pada skrin, dan kemudian mengira jarak pergerakan jari.

2. Kaedah pengesanan hentian gelongsor

Dalam Vue, kami boleh menggunakan arahan tersuai untuk mendengar acara gelongsor. Arahan tersuai ialah ciri yang sangat berguna dalam Vue, yang boleh mengikat acara dan atribut terus kepada elemen DOM dengan mudah.

Berikut ialah contoh mudah Kita boleh menambah arahan v-touchend pada elemen Arahan ini akan dicetuskan apabila jari meninggalkan skrin, dan arah dan jarak gelongsor jari boleh diperolehi. arahan itu.

Vue.directive('touchend', {
  bind: function(el, binding) {
    let startX, startY;
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchend', function(event) {
      let endX = event.changedTouches[0].clientX;
      let endY = event.changedTouches[0].clientY;
      let distanceX = endX - startX;
      let distanceY = endY - startY;
      let direction = '';
      if (Math.abs(distanceX) < Math.abs(distanceY)) {
        // 垂直方向滑动
        if (distanceY < 0) {
          direction = &#39;up&#39;;
        } else {
          direction = &#39;down&#39;;
        }
      } else {
        // 水平方向滑动
        if (distanceX < 0) {
          direction = &#39;left&#39;;
        } else {
          direction = &#39;right&#39;;
        }
      }
      binding.value(direction, distanceX, distanceY);
    });
  }
});

Dalam contoh ini, kami menggunakan fungsi bind hook untuk mendaftarkan arahan, kemudian mendengar peristiwa touchstart dan touchend melalui kaedah addEventListener, mengira jarak dan arah slaid jari, dan lulus keputusan kepada fungsi mengikat perintah.

3. Senario aplikasi hentian gelongsor

Dalam pembangunan mudah alih, terdapat banyak senario aplikasi yang perlu mengesan hentian gelongsor, seperti tarik ke bawah untuk menyegarkan, tarik ke atas untuk memuatkan, dsb. . Kita boleh melaksanakan fungsi ini dengan mencetuskan peristiwa yang sepadan apabila hentian gelongsor dikesan.

Ambil muat semula tarik ke bawah sebagai contoh Kami boleh menambah ikon tarik ke bawah pada elemen yang terikat pada arahan v-touchend. Ia akan muncul apabila pengguna menarik ke bawah apabila pengguna mari pergi, acara muat semula tarik turun akan dicetuskan secara automatik.

Vue.directive('pull-refresh', {
  bind: function(el, binding) {
    let startX, startY;
    let refreshHeight = 60; // 下拉刷新高度
    let refreshIcon = document.createElement('img');
    refreshIcon.src = 'https://xxx.com/icons/refresh.png';
    refreshIcon.width = 40;
    refreshIcon.height = 40;
    refreshIcon.style.display = 'none';
    refreshIcon.style.marginLeft = '-20px';
    refreshIcon.style.position = 'absolute';
    refreshIcon.style.top = '-50px';
    el.appendChild(refreshIcon);
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchmove', function(event) {
      let endY = event.changedTouches[0].clientY;
      let distanceY = endY - startY;
      if (distanceY > refreshHeight) {
        refreshIcon.style.display = 'block';
        binding.value();
      } else {
        refreshIcon.style.display = 'none';
      }
    });
  }
});

Dalam contoh ini, kami menggunakan arahan tersuai v-pull-refresh Selepas mengikat arahan ini pada elemen, peristiwa muat semula tarik-turun akan dicetuskan apabila pengguna menarik ke bawah lebih daripada 60 piksel. .

4. Ringkasan

Artikel ini memperkenalkan secara ringkas acara gelongsor mudah alih dan cara menambah arahan tersuai dalam Vue untuk mengesan hentian gelongsor untuk mencapai muat semula tarik turun dan fungsi lain. Selain menyegarkan tarik-turun, hentian gelongsor juga boleh digunakan untuk mencapai pemuatan tarik-turun, karusel imej dan kesan lain. Menguasai kemahiran kawalan gelongsor ini akan sangat membantu dalam meningkatkan pengalaman pengguna aplikasi mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk mengesan hentian gelongsor dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!