Eventos de deslizar hacia arriba, deslizar hacia abajo, deslizar hacia la izquierda y deslizar hacia la derecha en el terminal móvil de reacción

1. Introducción del paquete:

Cuando escribimos proyectos móviles de reacción, necesitamos usar eventos deslizantes, pero los eventos deslizantes nativos no pueden determinar la dirección de deslizamiento,
por lo que encapsulé un
paquete de instalación de clase de herramienta de eventos deslizantes.

npm i @gystt/ysutils 

2. Introducción al método

1. Deslizamiento avanzado (evento, slideObj)

1.1 Introducción al método:
该方法可以给标签添加滑动事件(向上滑动,向下滑动,向左滑动,向右滑动),并执行传入的回调函数
1.2 Introducción de parámetros:
event:需要添加滑动事件的标签
slideObj:是一个滑动事件的对象(里面所有的属性都是可选参数)
  {
    top:需要一个函数,是上滑的回调
    bottom:需要一个函数,是下滑的回调
    left:需要一个函数,是左滑的回调
    right:需要一个函数,是右滑的回调
    slde:需要一个数字,滑动多少距离触发滑动事件(默认是30)
 }
1.3 Lista de casos del método
import React, {
    
     Component, createRef } from 'react'
import {
    
     advancedSliding } from '@gystt/ysutils'
import './App.css'
export default class App extends Component {
    
    
  divRef = createRef(null)

  top = () => {
    
    
    console.log("上滑事件");
  }
  bottom = () => {
    
    
    console.log("下滑事件");
  }

  componentDidMount() {
    
    
    advancedSliding(this.divRef, {
    
     top: this.top, bottom: this.bottom })
  }
  render() {
    
    
    return (
      <div ref={
    
    this.divRef}>

      </div>
    )
  }
}

Supongo que te gusta

Origin blog.csdn.net/m0_63135041/article/details/130693265
Recomendado
Clasificación