移动端手势事件

原创于 2023-03-25 09:37:00 发布 · 91 阅读

CC 4.0 BY-SA版权

文章标签：

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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