今天小编给大家分享一下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函数来处理手势判断逻辑并执行回调

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中使用

我使用的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}
         >