react中移动端上滑、下滑、左滑、右滑的滑动事件

一、包介绍：

我们在写react移动端项目时，需要用到滑动事件，但是原生的滑动事件不能确定滑动的方向
所以 我就封装了一个滑动事件的工具类
安装包

npm i @gystt/ysutils 

二、方法介绍

1、advancedSliding(event,slideObj)

1.1方法简介：

该方法可以给标签添加滑动事件(向上滑动，向下滑动，向左滑动，向右滑动)，并执行传入的回调函数

1.2参数介绍：

event:需要添加滑动事件的标签
slideObj：是一个滑动事件的对象(里面所有的属性都是可选参数)
  {
    top:需要一个函数，是上滑的回调
    bottom:需要一个函数，是下滑的回调
    left:需要一个函数，是左滑的回调
    right:需要一个函数，是右滑的回调
    slde:需要一个数字，滑动多少距离触发滑动事件(默认是30)
 }

1.3方法案列

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