


So implementieren Sie das Einschieben von Reaktionen
So implementieren Sie das Gleiten in React: 1. Suchen Sie Berührungen im Ereignis onTouchStart und zeichnen Sie das Auftreten neuer Berührungen gemäß der Kennung auf. 2. Zeichnen Sie die Koordinaten jedes von der Berührung passierten Punkts gemäß der Kennung im Ereignis onTouchMove auf. 3. Suchen Sie im onTouchEnd-Ereignis das Endberührungsereignis und berechnen Sie dann die auszuführende Geste basierend auf dem Punkt, den das Endberührungsereignis kreuzt.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.
Wie implementiert man eine Sliding-In-Reaktion?
react realisiert den linken und rechten Schiebeeffekt.
Ich habe mit der Suche begonnen und festgestellt, dass ich keine geeignete Bibliothek finden konnte. Auf den ersten Blick stellte ich fest, dass es in der Front-End-Welt vier- bis fünfhundert Sterne gab === ich selbst, und es schien nicht die Funktion zu sein, die ich wollte. Vergiss es, schreibe einfach selbst welche. Nachdem wir uns das Prinzip angeschaut haben, funktioniert es grundsätzlich mit den drei Ereignissen onTouchStart, onTouchMove und onTouchEnd, um den Gleitpunkt zu erfassen und dann die Geste zu berechnen.
Zeichnen Sie im onTouchMove-Ereignis die Koordinaten jedes durch die Berührung passierten Punkts basierend auf der Kennung auf.
Suchen Sie im onTouchEnd-Ereignis das Endberührungsereignis und berechnen Sie dann die Geste, die von dem Punkt ausgeführt werden soll, der vom Endberührungsereignis gekreuzt wird.
Für mich möchte ich nur die Funktion des Auf- und Abgleitens, also konzentriere ich mich nur auf die Single-Touch-Situation.
Als nächstes bereiten Sie sich darauf vor, den Code zu schreiben. Oh nein, zuerst müssen wir darüber nachdenken, wie wir es einkapseln. Fangen Sie an, sich selbst zu fragen und zu antworten: Ich möchte ein Singleton-Muster verwenden.
Ist die Verwendung zu mühsam? Muss ich es zuerst instanziieren? Dann statische Klassen verwenden?
Wenn Sie bereits über js verfügen, welche weiteren statischen Klassen werden benötigt? Geben Sie einfach ein Wörterbuch aus und fertig.
Okay, dann fangen wir an zu masturbieren.
Datenteil
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: {} } }; //存储向上、下换页的回调函数
Touch-Teil aufzeichnen
Die Ereignisse hier behandeln synthetische Reaktionsereignisse, keine nativen Ereignisse. 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函数来处理手势判断逻辑并执行回调
Nach dem Login kopieren
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函数来处理手势判断逻辑并执行回调
HandleTouch-Funktionfunction 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]()
);
// 向下翻页
}
}
Nach dem Login kopieren
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]() ); // 向下翻页 } }
Hier beurteile ich nur zwei Ereignisse, Seite auf und ab, wenn das Ereignis erreicht ist, werden alle für das Ereignis registrierten Rückrufe aufgerufen. Bei mehreren Rückrufen kann die Ausführungsreihenfolge der Rückrufe nach Bedarf angepasst werden. Hier sollte es keine Ordnung geben.
Schnittstellenteilfunction 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
};
//输出所有接口函数
Nach dem Login kopieren
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 }; //输出所有接口函数
Mit in next.js verwende ich next.js+create-next-app. Binden Sie alle Berührungsereignisse in der Datei _app.js im Seitenverzeichnis.
//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);
Mal sehen, wie man es als nächstes verwendet.
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>
);
};
Nach dem Login kopierenWird in nativer Reaktion verwendet
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> ); };
//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> ); }
FazitWenn sich jemand den Code wirklich genau ansieht, kann es sein A Frage: Abgesehen von der Verwendung synthetischer Ereignisse in touch.js scheint es unkonventionell zu sein.
Das ist tatsächlich so, es hat nichts mit der Reaktion zu tun. Die Erklärung ist, dass diese Daten nicht über den React- oder Redux-Status geleitet werden müssen. Erstens löst die Aktualisierung des Redux- oder React-Status ein erneutes Rendern aus, was zweitens nicht erforderlich ist kann global verwendet werden. Daher habe ich den Reaktionsmechanismus nicht verwendet. Tatsächlich ist dies so etwas wie das, was React als unkontrollierte Komponenten bezeichnet.
//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
};
Nach dem Login kopierenEmpfohlenes Lernen: „React-Video-Tutorial
//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 };
“
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Einschieben von Reaktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

So erstellen Sie eine Echtzeit-Chat-Anwendung mit React und WebSocket Einführung: Mit der rasanten Entwicklung des Internets hat die Echtzeitkommunikation immer mehr Aufmerksamkeit auf sich gezogen. Live-Chat-Apps sind aus dem modernen Sozial- und Arbeitsleben nicht mehr wegzudenken. In diesem Artikel wird erläutert, wie Sie mit React und WebSocket eine einfache Echtzeit-Chat-Anwendung erstellen, und es werden spezifische Codebeispiele bereitgestellt. 1. Technische Vorbereitung Bevor wir mit der Erstellung einer Echtzeit-Chat-Anwendung beginnen, müssen wir die folgenden Technologien und Tools vorbereiten: React: eine zum Erstellen

React-Leitfaden zur Front-End- und Back-End-Trennung: So erreichen Sie die Front-End- und Back-End-Entkopplung und die unabhängige Bereitstellung. Es sind spezifische Codebeispiele erforderlich. In der heutigen Webentwicklungsumgebung ist die Front-End- und Back-End-Trennung zu einem Trend geworden. Durch die Trennung von Front-End- und Back-End-Code kann die Entwicklungsarbeit flexibler und effizienter gestaltet und die Zusammenarbeit im Team erleichtert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von React eine Front-End- und Back-End-Trennung erreichen und so die Ziele der Entkopplung und unabhängigen Bereitstellung erreichen. Zuerst müssen wir verstehen, was Front-End- und Back-End-Trennung ist. Im traditionellen Webentwicklungsmodell sind Front-End und Back-End gekoppelt

So erstellen Sie mit React und Flask einfache und benutzerfreundliche Webanwendungen. Einführung: Mit der Entwicklung des Internets werden die Anforderungen an Webanwendungen immer vielfältiger und komplexer. Um den Anforderungen der Benutzer an Benutzerfreundlichkeit und Leistung gerecht zu werden, wird es immer wichtiger, moderne Technologie-Stacks zum Aufbau von Netzwerkanwendungen zu verwenden. React und Flask sind zwei sehr beliebte Frameworks für die Front-End- und Back-End-Entwicklung, und sie arbeiten gut zusammen, um einfache und benutzerfreundliche Webanwendungen zu erstellen. In diesem Artikel erfahren Sie, wie Sie React und Flask nutzen

So erstellen Sie eine zuverlässige Messaging-Anwendung mit React und RabbitMQ Einführung: Moderne Anwendungen müssen zuverlässiges Messaging unterstützen, um Funktionen wie Echtzeitaktualisierungen und Datensynchronisierung zu erreichen. React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, während RabbitMQ eine zuverlässige Messaging-Middleware ist. In diesem Artikel wird erläutert, wie Sie React und RabbitMQ kombinieren, um eine zuverlässige Messaging-Anwendung zu erstellen, und es werden spezifische Codebeispiele bereitgestellt. RabbitMQ-Übersicht:

So verwenden Sie React und Google BigQuery zum Erstellen schneller Datenanalyseanwendungen. Einführung: Im heutigen Zeitalter der Informationsexplosion ist die Datenanalyse zu einem unverzichtbaren Bindeglied in verschiedenen Branchen geworden. Unter anderem ist die Entwicklung schneller und effizienter Datenanalyseanwendungen für viele Unternehmen und Einzelpersonen zum Ziel geworden. In diesem Artikel wird erläutert, wie Sie mit React und Google BigQuery eine schnelle Datenanalyseanwendung erstellen, und es werden detaillierte Codebeispiele bereitgestellt. 1. Übersicht React ist ein Werkzeug zum Erstellen

React-Code-Debugging-Leitfaden: So finden und beheben Sie Front-End-Fehler schnell. Einführung: Bei der Entwicklung von React-Anwendungen stoßen Sie häufig auf eine Vielzahl von Fehlern, die zum Absturz der Anwendung oder zu fehlerhaftem Verhalten führen können. Daher ist die Beherrschung von Debugging-Fähigkeiten eine wesentliche Fähigkeit für jeden React-Entwickler. In diesem Artikel werden einige praktische Techniken zum Auffinden und Beheben von Front-End-Fehlern vorgestellt und spezifische Codebeispiele bereitgestellt, um Lesern dabei zu helfen, Fehler in React-Anwendungen schnell zu finden und zu beheben. 1. Auswahl der Debugging-Tools: In Re

ReactRouter-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Mit der Popularität von Single-Page-Anwendungen ist das Front-End-Routing zu einem wichtigen Bestandteil geworden, der nicht ignoriert werden kann. Als beliebteste Routing-Bibliothek im React-Ökosystem bietet ReactRouter umfangreiche Funktionen und benutzerfreundliche APIs, wodurch die Implementierung des Front-End-Routings sehr einfach und flexibel ist. In diesem Artikel wird die Verwendung von ReactRouter vorgestellt und einige spezifische Codebeispiele bereitgestellt. Um ReactRouter zuerst zu installieren, benötigen wir

React Responsive Design Guide: So erzielen Sie adaptive Front-End-Layouteffekte Mit der Beliebtheit mobiler Geräte und der steigenden Nachfrage der Benutzer nach Multi-Screen-Erlebnissen ist Responsive Design zu einem der wichtigsten Aspekte in der modernen Front-End-Entwicklung geworden. React, eines der derzeit beliebtesten Frontend-Frameworks, bietet eine Fülle von Tools und Komponenten, die Entwicklern dabei helfen, adaptive Layouteffekte zu erzielen. In diesem Artikel werden einige Richtlinien und Tipps zur Implementierung von responsivem Design mit React vorgestellt und spezifische Codebeispiele als Referenz bereitgestellt. Fle mit React
