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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值