react-swipeable-views 使页面切换更加流畅

最新推荐文章于 2025-06-25 09:32:50 发布

helloxielan

最新推荐文章于 2025-06-25 09:32:50 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui python ViewUI

原文链接：https://my.oschina.net/codingBingo/blog/847518

本文介绍如何使用React的SwipeableViews组件实现页面间的平滑切换，并通过合理利用onChangeIndex回调函数减少不必要的资源消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

首先我们要尊重原著这里给一个源码地址

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;

这官方给的一个最简单的实现组件,本来嘛,react对于使用者来说就是非常友好的,

那么现在问题就来了,如何实现所谓的页面切换呢?

其实很简单,就是将所有的页面都塞到SwipeableViews这个大标签里面,

但是这样的话就会带来另外一个问题,就是在渲染的时候会渲染所有的页面

举个栗子,看下面的代码

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)}>
      <PageOne/>
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      <PageTwo/>
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      <PageThree/>
    </div>
  </SwipeableViews>
);


const PageOne = () => (
  <div>
    1
  </div>
);

const PageTwo = () => (
  <div>
    2
  </div>
);

const PageThree = () => (
  <div>
    3
  </div>
)

export default MyComponent;

也许这样还是看不出来,那么接下来

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)}>
      <PageOne/>
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      <PageTwo/>
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      <PageThree/>
    </div>
  </SwipeableViews>
);


class PageOne extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page one');
   }

   render (
      <div>
        1
      </div>    
   )
}

class PageTwo extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page two');
   }

   render (
      <div>
        2
      </div>    
   )
}

class PageThree extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page three');
   }

   render (
      <div>
        3
      </div>    
   )
}

export default MyComponent;

ok,这样应该可以很明显就看出来了,当第一次加载这个主页面的时候就会分别执行子页面的三个ajax请求,但是这并不是我们想看到的,因此,我们就要用到其自带的onChangeIndex这个函数啦

接下来看看怎么用

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 handleChange = (index) => {
   console.log(index); //此值为切换后的页面索引值
   // 可以根据不用的index来做出不同的ajax请求
};

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      <PageOne/>
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      <PageTwo/>
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      <PageThree/>
    </div>
  </SwipeableViews>
);


class PageOne extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page one');
   }

   render (
      <div>
        1
      </div>    
   )
}

class PageTwo extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page two');
   }

   render (
      <div>
        2
      </div>    
   )
}

class PageThree extends React.Component {
   
   componentWillMount () {
      // do some ajax request
      console.log('ajax request by page three');
   }

   render (
      <div>
        3
      </div>    
   )
}

export default MyComponent;

其实原理还是很好理解的

说白了就是在页面切换的时候再请求,而不是在主页面渲染的时候就执行所有的请求,

可以减少很多不必要的资源消耗

转载于:https://my.oschina.net/codingBingo/blog/847518