React 可滑动选项卡

Question

我是 React 初学者，正在尝试为移动查看器合并简单的可滑动标签。（类似于 Instagram 个人资料上的标签）

我找到了 react-swipeable-views 和 Material UI 并尝试使用它。

如果我点击选项卡菜单似乎可以正常工作，但问题是当我滑动选项卡正文时选项卡 menu/index 没有更新。

如果有人知道更好的方法来做到这一点或使这项工作成功，请与我分享您的智慧

import { useState } from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import SwipeableViews from "react-swipeable-views";

const TabContent = (props) => {
  const [index, setIndex] = useState(0);

  return (
    <>
      <Tabs value={index} fullWidth onChange={()=>setIndex(value)}>
        <Tab label="tab 1" />
        <Tab label="tab 2" />
        <Tab label="tab 3" />
      </Tabs>

      <SwipeableViews
        index={index}
        onChangeIndex={() => setIndex(index)}
        enableMouseEvents
        animateHeight
      >
            <div>tab 1</div>
            <div>tab 2</div>
            <div>tab 3</div>
     </SwipeableViews>
    </>

)

export default TabContent;

谢谢！

Answer 1

onChangeIndex={index => setIndex(index)}

否则你正在从你的状态更改为索引，这是当前索引:)

React 可滑动选项卡

React Swipeable tab

tabs

swipe

reactjs

material-ui

react-swipeable-views