重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天小编给大家分享一下react如何实现滑动效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
专注于为中小企业提供成都网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业弋江免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
react实现滑动的方法:1、在onTouchStart事件找到touches,根据identifier中记录新的touch出现;2、在onTouchMove事件中根据identifier来记录每个touch经过的点的坐标;3、在onTouchEnd事件中,找到结束的touch事件,然后通过结束的touch事件划过的点来计算要执行的手势即可。
react 实现左右滑动效果
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: {} }
};
//存储向上、下换页的回调函数
这里的事件处理的是react的合成事件,并非原生事件。
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函数来处理手势判断逻辑并执行回调
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;
}
//注册向上滑动回调并返回回调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
};
//输出所有接口函数
这没啥说的,就是折麽简单粗暴。接下来,就在react中使用吧!
我使用的next.js+create-next-app。在pages目录下的_app.js文件中绑定所有touch事件。
//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 (
onTouchEnd={touch.onTouchEnd}
onTouchStart={touch.onTouchStart}
onTouchMove={touch.onTouchMove}
>
接下来看看如何使用。
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 (
This is an example!!
);
};
这个项目使用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 (
onTouchEnd={touch.onTouchEnd}
onTouchStart={touch.onTouchStart}
onTouchMove={touch.onTouchMove}
>
Edit src/App.js
and save to reload.
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
如果真的有人仔细看了代码,可能会有个问题,这个touch.js里的内容除了使用了react的合成事件,然后就没react什么事了,好像不太常规。
的确是这样,就没关react什么事了。解释就是这些数据不用通过react的state或者redux的state太传递,一来是在性能上,一更新redux或者react的state就会触发react的重新渲染,没有必要,二就是希望可以全局使用这些接口,所以就并没有借助react的机制。其实这就像是react所说的uncontrolled components。
最后附上完整的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
};
以上就是“react如何实现滑动效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。