小程序内使用onTouchEnd时实现点击才触发，滑动不触发

怕冷的火焰（~杰）

于 2023-06-12 17:28:09 发布

阅读量335

点赞数

分类专栏：小程序前端文章标签：小程序前端

本文链接：https://blog.csdn.net/weixin_50236973/article/details/131173486

版权

前端同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

小程序

37 篇文章 0 订阅

订阅专栏

该文章展示了如何在React应用中利用useState钩子来追踪用户是否正在滚动。通过handleTouchStart,handleTouchMove和handleTouchEnd函数，可以确定当用户停止滚动时执行特定代码。

摘要由CSDN通过智能技术生成

import React, { useState } from 'react';

function App() {
  const [isScrolling, setIsScrolling] = useState(false);

  const handleTouchStart = () => {
    setIsScrolling(true);
  };

  const handleTouchMove = () => {
    setIsScrolling(true);
  };

  const handleTouchEnd = () => {
    if (!isScrolling) {
      // 执行您的代码
    }
    setIsScrolling(false);
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {/* 您的组件 */}
    </div>
  );
}