Glissez vers le haut, faites glisser vers le bas, faites glisser vers la gauche, faites glisser les événements vers la droite dans le terminal mobile React

1. Présentation du paquet :

Lorsque nous écrivons des projets React Mobile, nous devons utiliser des événements coulissants, mais les événements coulissants natifs ne peuvent pas déterminer la direction du glissement, j'ai donc encapsulé un package d'installation
de classe d'outils d'événements coulissants.

npm i @gystt/ysutils 

2. Introduction à la méthode

1、advancedSliding(event,slideObj)

1.1 Introduction à la méthode :
该方法可以给标签添加滑动事件(向上滑动,向下滑动,向左滑动,向右滑动),并执行传入的回调函数
1.2 Introduction des paramètres :
event:需要添加滑动事件的标签
slideObj:是一个滑动事件的对象(里面所有的属性都是可选参数)
  {
    top:需要一个函数,是上滑的回调
    bottom:需要一个函数,是下滑的回调
    left:需要一个函数,是左滑的回调
    right:需要一个函数,是右滑的回调
    slde:需要一个数字,滑动多少距离触发滑动事件(默认是30)
 }
1.3 Liste des cas de méthode
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>
    )
  }
}

Je suppose que tu aimes

Origine blog.csdn.net/m0_63135041/article/details/130693265
conseillé
Classement