ReactJS 选项卡切换（react-swipeable-views）

最新推荐文章于 2026-04-15 21:15:51 发布

原创最新推荐文章于 2026-04-15 21:15:51 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#swipe #reactjs

ReactJS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用React组件react-swipeable-views来实现选项卡切换功能。通过安装并引入该组件，开发者可以轻松创建可滑动切换的视图。组件支持多种平台，并提供了丰富的API和示例。

ReactJS 选项卡切换实现

应用组件 react-swipeable-views
react-swipeable-views : Doc

A React component for swipeable views. ❄️ https://react-swipeable-views.com/

Installation

Install react-swipeable-views.

npm

npm install --save react-swipeable-views

Usage

Get started with react-swipeable-views in no time.

Simple example

import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      slide n°1
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      slide n°2
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      slide n°3
    </div>
  </SwipeableViews>
);

export default MyComponent;

my example

react-swipeable-views

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// import SwipeViews from 'react-swipe-views';
import SwipeViews from 'react-swipeable-views';


const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
    minHeight: 400,
  },
  slide3: {
    background: '#6AC0FF',
    minHeight: 600,
  },
};

class App extends Component {


  constructor(props) {
    super(props);
    this.state = {
      index: 0,
    };
  }

  handleChange = (event, value) => {
    this.setState({
      index: value,
    });
  };

  handleChangeIndex = index => {
    this.setState({
      index,
    });
  };

  render() {
    const { index } = this.state;
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <div>
          <button style={{ background: "green", height: "30px" }} onClick={(e) => this.handleChange(e, 0)}>slide1</button>
          <button style={{ background: "red", height: "30px" }} onClick={(e) => this.handleChange(e, 1)}>slide2</button>
          <button style={{ background: "blue", height: "30px" }} onClick={(e) => this.handleChange(e, 2)}>slide3</button>
        </div>
        <SwipeViews
          containerStyle={{ minHeight: 400 }}
          animateHeight={true}
          index={index} onChangeIndex={this.handleChangeIndex}>
          <div style={Object.assign({}, styles.slide, styles.slide1)}>
            slide n°1
          </div>
          <div style={Object.assign({}, styles.slide, styles.slide2)}>
            slide n°2
          </div>
          <div style={Object.assign({}, styles.slide, styles.slide3)}>
            slide n°3
          </div>
        </SwipeViews>
        <div style={{background:"purple", wight: "100%", height: "30px", padding: "10px"}}>
          <button>ON CLICK</button>
        </div>
      </div>
    );
  }
}

export default App;