react-id-swiper 的使用

原创

kmokidd

发布于 2019-08-14 04:01:48

4.6K00

代码可运行

文章被收录于专栏：无人打理的花园无人打理的花园

运行总次数：0

代码可运行

ReactJs component for iDangerous Swiper

github 地址，demo地址。支持多种场景，作者对 issues 的响应极快。

封装了非常成熟的 iDangerous Swiper ，基本可以在大部分“滑动”场景中使用，无论是顶部 banner 轮播、image gallery，还是横/竖向的手势切换内容，都能用上。有丰富的参数、事件监听可供调用。使用门槛低，无论是在函数组件里还是在类组件中，很容易调用。

在 2.1.0 之后 react-id-swiper 用起了 React Hook，demo 里给出的基本都是函数组件的使用方法。笔者的使用场景则是在类组件中，和函数组件不太一样的地方主要在如何获取 swiper 对象 ( react-id-swiper 的作者给了 Hook 写法的 demo )，进而使用它的方法和属性。

按照文档安装后，假设现在需要在 A 组件中使用 Swiper，A 组件是一个竖向整屏滑动的长列表，效果可以参考 fullpage 的官网首页：

// 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();
        }
      }
    };
	}
}