Registro de demostración|Cómo implementar la pequeña función de deslizarse hacia arriba y hacia abajo para activar eventos en la página móvil H5

16541198:

Registro de demostración|Cómo implementar la pequeña función de deslizarse hacia arriba y hacia abajo para activar eventos en la página móvil H5

Simplemente grabe una pequeña demostración, si es más práctico escribir páginas h5, puede lograr algunas funciones interesantes.
Lo uso principalmente aquí para realizar el cambio hacia arriba y hacia abajo de videos de Douyin de una manera alternativa. Debido a que las selecciones involucradas en el video no se pueden usar para cambiar hacia arriba y hacia abajo de acuerdo con la mayoría de los cambios de lista en línea, entonces uso los botones arriba y abajo. deslícese hacia abajo hasta un punto crítico para activar el evento de cambio de juego.

lograr efecto

La página es la medición real realizada a través del navegador del teléfono móvil.
La página es la siguiente:

Al deslizarse hacia abajo:
si la distancia de deslizamiento excede 100, el evento de alerta correspondiente se activa cuando se detiene el deslizamiento y el desplazamiento en tiempo real del eje y de la página se realiza a través del atributo de transformación.

El mismo principio, al deslizar hacia arriba:

Código

El código se implementa usando vue3, los comentarios son muy claros y el código se puede convertir de acuerdo con el principio.

<script setup>
import {
    
     onMounted, onUnmounted, ref } from 'vue';

// 在组件挂载时绑定触摸事件
onMounted(() => {
    
    
  window.addEventListener('touchstart', handleTouchStart);
  window.addEventListener('touchmove', handleTouchMove);
  window.addEventListener('touchend', handleTouchEnd);
});

// 在组件卸载时解绑触摸事件
onUnmounted(() => {
    
    
  window.removeEventListener('touchstart', handleTouchStart);
  window.removeEventListener('touchmove', handleTouchMove);
  window.removeEventListener('touchend', handleTouchEnd);
});

const startY = ref(0); // 记录触摸开始的Y坐标
const moveY = ref(0); // 记录滑动的Y距离
const isMoving = ref(false); // 是否正在滑动

// 监听touchstart事件，记录触摸开始的Y坐标
const handleTouchStart = (e) => {
    
    
  startY.value = e.touches[0].clientY;
};
// 监听touchmove事件，计算滑动的Y距离
const handleTouchMove = (e) => {
    
    
  if(!isMoving.value) {
    
    
    isMoving.value = true;
  }
  moveY.value = e.touches[0].clientY - startY.value;
};
// 监听touchend事件，判断滑动的距离是否超过100px，并执行相应的事件
const handleTouchEnd = () => {
    
    
  if(isMoving.value && moveY.value >= 100) {
    
    
    alert('向下滑动超过100px了');
  }
  if(isMoving.value && moveY.value <= -100) {
    
    
    alert('向上滑动超过100px了');
  }
  startY.value = 0;
  moveY.value = 0;
  isMoving.value = false;
};

</script>

<template>
  <!-- 通过transform实现滑动时页面的跟随 -->
  <div class="root" :style="{ transform: `translateY(${moveY}px)` }">
    <h3>Demo Page</h3>
    <p>滑动距离：{
    
    {
    
    moveY}}</p>
  </div>
</template>

<style lang="less" scoped>
.root {
    
    
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;
  background-color: rgb(0, 255, 234);
}
</style>