Comment implémenter le glissement en réaction
Comment implémenter le glissement dans React : 1. Rechercher les touches dans l'événement onTouchStart et enregistrer l'apparition de nouvelles touches en fonction de l'identifiant ; 2. Enregistrez les coordonnées de chaque point passé par le toucher en fonction de l'identifiant dans l'événement onTouchMove ; 3. Dans l'événement onTouchEnd, recherchez l'événement tactile de fin, puis calculez le geste à effectuer en fonction du point traversé par l'événement tactile de fin.
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Comment implémenter le glissement en réaction ?
react réalise l'effet de glissement gauche et droit
Implémentation de gestes de glissement dans React

Récemment, j'ai fait un peu sur la fonction de rotation de page coulissante de React sur le terminal mobile.
J'ai commencé à chercher et j'ai découvert que je ne trouvais pas de bibliothèque appropriée. La seule bibliothèque que j'ai trouvée était une bibliothèque nommée React-Touch. À première vue, j'ai découvert qu'il y avait quatre à cinq cents étoiles dans le monde front-end. === moi-même, et cela ne semblait pas être la fonction que je voulais. Oubliez ça, écrivez-en vous-même.
Après avoir regardé le principe, cela fonctionne essentiellement avec les trois événements onTouchStart, onTouchMove et onTouchEnd pour enregistrer le point de glissement puis calculer le geste.
Évidemment pour le multi-touch, vous devez trouver le chemin de chaque point de contact, il y a donc les étapes suivantes :
Trouvez les touches dans l'événement onTouchStart, et enregistrez la nouvelle occurrence de contact en fonction de l'identifiant.
Dans l'événement onTouchMove, enregistrez les coordonnées de chaque point passé par le toucher en fonction de l'identifiant.
Dans l'événement onTouchEnd, recherchez l'événement tactile de fin, puis calculez le geste à effectuer par le point traversé par l'événement tactile de fin.
Pour moi, je veux juste la fonction de glisser de haut en bas, donc je me concentre uniquement sur la situation d'une seule touche.
Ensuite, préparez-vous à écrire le code. Oh non, nous devons d’abord réfléchir à la manière de l’encapsuler. Commencez à vous demander et à répondre :
Je souhaite utiliser un modèle singleton.
Est-ce trop difficile à utiliser ? Dois-je d'abord l'instancier ?
Alors utiliser des classes statiques ?
Si vous avez déjà js, de quelles classes statiques supplémentaires avez-vous besoin? Il suffit de générer un dictionnaire et c'est tout.
D'accord, commençons à nous masturber.
Partie données
const touchData = { touching: false, trace: [] }; // 单点触摸,所以只要当前在触摸中,就可以把划过的点记录到trace中了 function* idGenerator() { let start = 0; while (true) { yield start; start += 1; } } //这个生成器用来生成不同事件回调的id,这样我们可以注册不同的回调,然后在不需要的时候删掉。 const callbacks = { onSlideUpPage: { generator: idGenerator(), callbacks: {} }, onSlideDownPage: { generator: idGenerator(), callbacks: {} } }; //存储向上、下换页的回调函数
Partie tactile d'enregistrement
Les événements ici gèrent les événements synthétiques de réaction, pas les événements natifs.
function onTouchStart(evt) { if (evt.touches.length !== 1) { touchData.touching = false; touchData.trace = []; return; } touchData.touching = true; touchData.trace = [{ x: evt.touches[0].screenX, y: evt.touches[0].screenY }]; } //在onTouchStart事件,如果是多点触摸直接清空所有数据。如果是单点触摸,记录第一个点,并设置状态 function onTouchMove(evt) { if (!touchData.touching) return; touchData.trace.push({ x: evt.touches[0].screenX, y: evt.touches[0].screenY }); } //如果在单点触摸过程中,持续记录触摸的位置。 function onTouchEnd() { if (!touchData.touching) return; let trace = touchData.trace; touchData.touching = false; touchData.trace = []; handleTouch(trace); //判断touch类型并调用适当回调 } //在触摸结束事件,中调用handleTouch函数来处理手势判断逻辑并执行回调
fonction handleTouch
function handleTouch(trace) { let start = trace[0]; let end = trace[trace.length - 1]; if (end.y - start.y > 200) { Object.keys(callbacks.onSlideUpPage.callbacks).map(key => callbacks.onSlideUpPage.callbacks[key]() ); // 向上翻页 } else if (start.y - end.y > 200) { Object.keys(callbacks.onSlideDownPage.callbacks).map(key => callbacks.onSlideDownPage.callbacks[key]() ); // 向下翻页 } }
Ici, je ne juge que deux événements, page haut et bas. Si l'événement est atteint, tous les rappels enregistrés pour l'événement seront appelés. S'il y a plusieurs rappels, l'ordre d'exécution des rappels peut être ajusté selon les besoins. Il ne devrait y avoir aucun ordre ici.
Partie interface
function addSlideUpPage(f) { let key = callbacks.onSlideUpPage.generator.next().value; callbacks.onSlideUpPage.callbacks[key] = f; return key; } //注册向上滑动回调并返回回调id function addSlideDownPage(f) { let key = callbacks.onSlideDownPage.generator.next().value; callbacks.onSlideDownPage.callbacks[key] = f; return key; } //注册向下滑动回调并返回回调id function removeSlideUpPage(key) { delete callbacks.onSlideUpPage.callbacks[key]; } //使用回调id删除向上滑动回调 function removeSlideDownPage(key) { delete callbacks.onSlideDownPage.callbacks[key]; } //使用回调id删除向下滑动回调 export default { onTouchEnd, onTouchMove, onTouchStart, addSlideDownPage, addSlideUpPage, removeSlideDownPage, removeSlideUpPage }; //输出所有接口函数
Il n'y a pas grand chose à dire, c'est tellement simple et grossier. Ensuite, utilisons-le en réaction !
En utilisant
dans next.js, j'utilise next.js+create-next-app. Liez tous les événements tactiles dans le fichier _app.js dans le répertoire pages.
//pages/_app.js import App, { Container } from "next/app"; import React from "react"; import withReduxStore from "../redux/with-redux-store"; import { Provider } from "react-redux"; import touch from "../components/touch"; class MyApp extends App { render() { const { Component, pageProps, reduxStore } = this.props; return ( <Container> <Provider store={reduxStore}> <div onTouchEnd={touch.onTouchEnd} onTouchStart={touch.onTouchStart} onTouchMove={touch.onTouchMove} > <Component {...pageProps} /> </div> { // 将所有导出的touch事件绑定在最外层的div上 // 这样就可以全局注册事件了 } </Provider> </Container> ); } } export default withReduxStore(MyApp);
Voyons comment l'utiliser ensuite.
import React, {useEffect} from "react"; import touch from "../touch"; const Example = () => { useEffect(() => { let key = touch.addSlideDownPage(() => { console.log("try to slideDownPage!!") }); return () => { touch.removeSlideDownPage(key) // 用完别忘了删除事件 }; }, []); return ( <div>This is an example!!</div> ); };
Utilisé dans React natif
Ce projet est généré à l'aide de create-react-app
//src/App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; import touch from "./components/touch"; function App() { return ( <div className="App" onTouchEnd={touch.onTouchEnd} onTouchStart={touch.onTouchStart} onTouchMove={touch.onTouchMove} > <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); }
Conclusion
Si quelqu'un regarde vraiment le code attentivement, il peut y avoir A question. En plus d'utiliser les événements synthétiques de React, le contenu de touch.js n'a rien à voir avec React.
C’est bien le cas, cela n’a rien à voir avec réagir. L'explication est que ces données n'ont pas besoin d'être transmises via l'état de React ou l'état de Redux. Premièrement, en termes de performances, la mise à jour de l'état de Redux ou de React déclenchera le nouveau rendu de React, ce qui n'est pas nécessaire. peut être utilisé globalement. Je n’ai donc pas utilisé le mécanisme de réaction. En fait, c’est ce que React appelle les composants incontrôlés.
Enfin ci-joint le touch.js
//touch.js const touchData = { touching: false, trace: [] }; function* idGenerator() { let start = 0; while (true) { yield start; start += 1; } } const callbacks = { onSlideUpPage: { generator: idGenerator(), callbacks: {} }, onSlideDownPage: { generator: idGenerator(), callbacks: {} } }; function onTouchStart(evt) { if (evt.touches.length !== 1) { touchData.touching = false; touchData.trace = []; return; } touchData.touching = true; touchData.trace = [{ x: evt.touches[0].screenX, y: evt.touches[0].screenY }]; } function onTouchMove(evt) { if (!touchData.touching) return; touchData.trace.push({ x: evt.touches[0].screenX, y: evt.touches[0].screenY }); } function onTouchEnd() { if (!touchData.touching) return; let trace = touchData.trace; touchData.touching = false; touchData.trace = []; handleTouch(trace); } function handleTouch(trace) { let start = trace[0]; let end = trace[trace.length - 1]; if (end.y - start.y > 200) { Object.keys(callbacks.onSlideUpPage.callbacks).map(key => callbacks.onSlideUpPage.callbacks[key]() ); } else if (start.y - end.y > 200) { Object.keys(callbacks.onSlideDownPage.callbacks).map(key => callbacks.onSlideDownPage.callbacks[key]() ); } } function addSlideUpPage(f) { let key = callbacks.onSlideUpPage.generator.next().value; callbacks.onSlideUpPage.callbacks[key] = f; return key; } function addSlideDownPage(f) { let key = callbacks.onSlideDownPage.generator.next().value; callbacks.onSlideDownPage.callbacks[key] = f; return key; } function removeSlideUpPage(key) { delete callbacks.onSlideUpPage.callbacks[key]; } function removeSlideDownPage(key) { delete callbacks.onSlideDownPage.callbacks[key]; } export default { onTouchEnd, onTouchMove, onTouchStart, addSlideDownPage, addSlideUpPage, removeSlideDownPage, removeSlideUpPage };
Apprentissage recommandé : "tutoriel vidéo React"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment créer une application de chat en temps réel à l'aide de React et WebSocket Introduction : Avec le développement rapide d'Internet, la communication en temps réel a attiré de plus en plus d'attention. Les applications de chat en direct font désormais partie intégrante de la vie sociale et professionnelle moderne. Cet article expliquera comment créer une application simple de chat en temps réel à l'aide de React et WebSocket, et fournira des exemples de code spécifiques. 1. Préparation technique Avant de commencer à créer une application de chat en temps réel, nous devons préparer les technologies et outils suivants : React : un pour la construction

Guide de séparation front-end et back-end de React : Comment réaliser un découplage front-end et back-end et un déploiement indépendant, des exemples de code spécifiques sont nécessaires Dans l'environnement de développement Web actuel, la séparation front-end et back-end est devenue une tendance. En séparant le code front-end et back-end, le travail de développement peut être rendu plus flexible, plus efficace et faciliter la collaboration en équipe. Cet article expliquera comment utiliser React pour réaliser une séparation front-end et back-end, atteignant ainsi les objectifs de découplage et de déploiement indépendant. Tout d’abord, nous devons comprendre ce qu’est la séparation front-end et back-end. Dans le modèle de développement Web traditionnel, le front-end et le back-end sont couplés

Comment utiliser React et Flask pour créer des applications Web simples et faciles à utiliser Introduction : Avec le développement d'Internet, les besoins des applications Web deviennent de plus en plus diversifiés et complexes. Afin de répondre aux exigences des utilisateurs en matière de facilité d'utilisation et de performances, il devient de plus en plus important d'utiliser des piles technologiques modernes pour créer des applications réseau. React et Flask sont deux frameworks très populaires pour le développement front-end et back-end, et ils fonctionnent bien ensemble pour créer des applications Web simples et faciles à utiliser. Cet article détaillera comment exploiter React et Flask

Comment créer une application de messagerie fiable avec React et RabbitMQ Introduction : Les applications modernes doivent prendre en charge une messagerie fiable pour obtenir des fonctionnalités telles que les mises à jour en temps réel et la synchronisation des données. React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur, tandis que RabbitMQ est un middleware de messagerie fiable. Cet article explique comment combiner React et RabbitMQ pour créer une application de messagerie fiable et fournit des exemples de code spécifiques. Présentation de RabbitMQ :

Guide de l'utilisateur de ReactRouter : Comment implémenter le contrôle du routage frontal Avec la popularité des applications monopage, le routage frontal est devenu un élément important qui ne peut être ignoré. En tant que bibliothèque de routage la plus populaire de l'écosystème React, ReactRouter fournit des fonctions riches et des API faciles à utiliser, rendant la mise en œuvre du routage frontal très simple et flexible. Cet article expliquera comment utiliser ReactRouter et fournira quelques exemples de code spécifiques. Pour installer ReactRouter en premier, nous avons besoin

Comment utiliser React et Google BigQuery pour créer des applications d'analyse de données rapides Introduction : À l'ère actuelle d'explosion de l'information, l'analyse des données est devenue un maillon indispensable dans diverses industries. Parmi eux, créer des applications d’analyse de données rapides et efficaces est devenu l’objectif poursuivi par de nombreuses entreprises et particuliers. Cet article explique comment utiliser React et Google BigQuery pour créer une application d'analyse rapide des données et fournit des exemples de code détaillés. 1. Présentation React est un outil pour créer

Comment utiliser React et Apache Kafka pour créer des applications de traitement de données en temps réel Introduction : Avec l'essor du Big Data et du traitement de données en temps réel, la création d'applications de traitement de données en temps réel est devenue la priorité de nombreux développeurs. La combinaison de React, un framework front-end populaire, et d'Apache Kafka, un système de messagerie distribué hautes performances, peut nous aider à créer des applications de traitement de données en temps réel. Cet article expliquera comment utiliser React et Apache Kafka pour créer des applications de traitement de données en temps réel, et

Solutions pour les écrans de téléphones portables difficiles à glisser et à sécher : 1. Humidifiez l'écran ; 2. Nettoyez l'écran régulièrement ; 3. Augmentez la force de glissement de vos doigts ; 4. Utilisez des protecteurs d'écran de téléphone portable ; 6. Gardez les mains humides ; 7. , manipulez-le proprement lors de l'application du film ; 8. Utilisez du lubrifiant 9. Utilisez des gants 10. Réglez la luminosité de l'écran ; Introduction détaillée : 1. Humidifiez l'écran, placez un humidificateur à côté de l'écran ou vaporisez de l'eau pour augmenter l'humidité de l'air, réduisant ainsi la sécheresse de l'écran ; 2. Nettoyez régulièrement l'écran, utilisez un nettoyant pour écran professionnel, etc.
