リアクトでページのスライド切り替えを実装する方法は何ですか？

React内でのページのスライド切り替えを実現するには、Reactのイベント処理とCSSのトランジション効果を使うことができます。以下は簡単な例です：

1. 最初に、現在のページのインデックスを追跡するためにReactコンポーネント内で状態を設定する必要があります。

import React, { useState } from "react";

const App = () => {
  const [currentPage, setCurrentPage] = useState(0);

  // ...

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
};

export default App;

1. タッチスタート
2. タッチ移動
3. タッチ終了

import React, { useState } from "react";

const App = () => {
  const [currentPage, setCurrentPage] = useState(0);

  const handleTouchStart = (e) => {
    // 记录滑动开始时的触摸位置
  };

  const handleTouchMove = (e) => {
    // 计算滑动的距离
    // 根据滑动距离来判断是否切换页面
  };

  const handleTouchEnd = (e) => {
    // 清除触摸位置记录
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {/* 页面内容 */}
    </div>
  );
};

export default App;

1. 遷移 (せんい)

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [currentPage, setCurrentPage] = useState(0);

  const handleTouchStart = (e) => {
    // 记录滑动开始时的触摸位置
  };

  const handleTouchMove = (e) => {
    // 计算滑动的距离
    // 根据滑动距离来判断是否切换页面
  };

  const handleTouchEnd = (e) => {
    // 清除触摸位置记录
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      className="slider-container"
      style={{
        transform: `translateX(-${currentPage * 100}%)`,
        transition: "transform 0.3s ease-in-out",
      }}
    >
      {/* 第一页 */}
      <div className="page">Page 1</div>
      {/* 第二页 */}
      <div className="page">Page 2</div>
      {/* 第三页 */}
      <div className="page">Page 3</div>
    </div>
  );
};

export default App;

1. 最後に、ページコンテナとページのスタイルを定義するためにいくつかのCSSスタイルを追加する必要があります。また、遷移効果のスタイルも追加してください。

.slider-container {
  display: flex;
  width: 300%;
}

.page {
  width: 33.33%;
}

.page:nth-child(1) {
  background-color: #ff0000;
}

.page:nth-child(2) {
  background-color: #00ff00;
}

.page:nth-child(3) {
  background-color: #0000ff;
}

上記の手順に従えば、Reactでページをスライド切り替える効果を実現することができます。ユーザーが画面をスライドすると、スライド距離に応じてページが切り替わり、切り替えがスムーズに行われるように遷移効果が追加されます。