一、包介绍:
我们在写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>
)
}
}