移动端手势事件

React组件中的手势识别与事件处理,

最新推荐文章于 2025-12-11 16:09:33 发布

原创最新推荐文章于 2025-12-11 16:09:33 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

该文章演示了一个React组件如何利用useEffect、useState和useRefhooks集成HammerJS库来处理手势事件，如tap和swipeleft。同时，它还导入了antd-mobile库的Button组件。组件内部创建了一个Hammertime实例，并绑定了事件监听器，用于在特定手势发生时打印日志信息。

import React, { useEffect, useState, useRef } from 'react'
import Hammer from 'hammerjs'
import './style.less'
import { Button, Space } from 'antd-mobile'

import { useMove } from '@@@'
export default function Demo(props) {
  const xy = useMove()
  console.log('xy', xy);
  useEffect(() => {
    const hammertime = new Hammer(ref.current)
    hammertime.on('tap', function (ev) {
      console.log('ev', ev);
    })

    hammertime.on('swipeleft', function (ev) {
      console.log(2222);
    })
  }, [])

  const ref = useRef()
  return (
    <div styleName='box' ref={ref}>
      测试文字
      <Button color='primary' fill='solid'>
        提交
      </Button>
    </div>
  )
}