react-id-swiper 的使用

// A.js
import Swiper from 'react-id-swiper';
import "react-id-swiper/lib/styles/scss/swiper.scss";

...

export default class Acomponent extends React.Component {
	handleSlideChange = () => {
		const { swiper } = this.state;
    const { list } = this.props;
    // 当列表长度大于 1 时，才需要更新 swiper 的当前状态
    if (swiper && list && list.length > 1) {
      this.setState(prevState => ({
        swiper: {
          ...prevState.swiper,
          activeIndex: swiper.swiperRef.activeIndex
        }
      }));
    }
	}
    
	render() {
    const { initSlideNum } = this.props;
		const params = {
      // 当前停留在列表的哪一页，从 0 开始
      initialSlide: initSlideNum ? initSlideNum : 0,
      // 声明滑动方向
      direction: "vertical",
      // 也可以叫“敏感度”，当滑动超过60px，才会触发显示下一页/上一页
      // 上下滑动的时候和页面滚动条（一页内的内容太多所以有 scroll）会有手势冲突，需要调整“敏感度”平衡这种冲突
      threshold: 60,
      // 当需要整屏滚动的时候，默认的 height 会导致容器计算错误，需要显示声明高度
      height: parseInt(window.innerHeight),
      // 获取 swiper 对象，Swiper 组件提供了各种方法和属性 http://idangero.us/swiper/api/#methods
      // 这些都是挂在 DOM 对象上的，函数组件不支持 ref 属性，所以把这个对象直接挂在了 state 中
      getSwiper: obj => {
        if (this.state && !this.state.swiper) {
          this.setState({
            swiper: {
              swiperRef: obj,
              activeIndex: obj.activeIndex
            }
          });
        }
      },
      on: {
        // 监听 Swiper 的事件，其他 Event 可以参考文档 http://idangero.us/swiper/api/#events
        slideChange: () => {
          this.handleSlideChange();
        }
      }
    };
	}
}