react-id-swiper 的使用

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券