专栏首页无人打理的花园react-id-swiper 的使用
原创

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 条评论
登录 后参与评论

相关文章

  • React 新手笔记

    团队的技术栈是 React saga + tcff(内部开源的框架,类似 dva)+ tea(内部开源的 UI 框架)

    kmokidd
  • [pixlate] 用 canvas 转像素画

    几周前看到这个像素猫的效果,这个版本的实现原理是 box-shadow,我想到用 grid 也可以实现一遍。接着发散到了“如何将任意图片像素化”上。

    kmokidd
  • 使用 Vue CLI 3 封装组件

    在时不时遇到”似曾相识“的 UI 模块时,我们下意识的反应一定是”不然把它抽成一个组件吧“。Element-UI 就是这样想法的集大成者。

    kmokidd
  • 微信小程序实战开发五:使用自定义组件配置一个通用的图片轮播组件。

    在开发中有很多时候为了节约代码,方便使用各种功能,我们需要创建很多类、方法、过程。小程序也是一样,小程序所有的方法、过程、类都封装成了一个叫组件的东西,包括微信...

    睿儿网络郝刚
  • Java基础面试系列(一)

    可以到.java文件通过Java编译器(javac.exe)编译成为.class文件。这个.class文件就是字节码文件,它是一种提供给JVM解释执行的文件。每...

    石的三次方
  • 【彭博】一图看懂无人驾驶主要玩家 | 科技与汽车融合的新世界

    【新智元导读】在产业界,存在这样一种担心:势头迅猛的科技巨头要凭借无人车将传统汽车制造商挤出汽车这一利润丰厚的百年老行业。这似乎有些耸人听闻了,科技企业凭借前沿...

    新智元
  • MessagePack Java 0.6.X 不使用注解(annotations)来序列化

    如果你不能添加 @Message 到你的定义对象中但是你还是希望进行序列化。你可以使用 register 方法来在类中启用序列化对象。

    HoneyMoose
  • 镁客请讲 | 绿智增材傅左强:做3D打印再生耗材的一个先行者

    数年前,3D打印仿若一夜间声名鹊起,成为了媒体、资本、创业的宠儿。同时,与之齐名的还有人工智能,它们都被誉为是新风口、新方向。后来,人工智能倒是一路狂奔向前,计...

    镁客网
  • 成为更优秀程序员的关键:更多的阅读

    虽然我一直以来都很享受于读书,但我总是很难挤出时间来阅读。而当真的空闲了,我通常会去阅读小说、自传,或一些怪癖但有趣的东西。我的Kindle电子书阅读器上到目前...

    哲洛不闹
  • 一篇带你看懂Flutter叠加组件Stack

    Stack未定位的子组件大小由fit参数决定,默认值是StackFit.loose,表示子组件自己决定,StackFit.expand表示尽可能的大,用法如下:

    老孟Flutter

扫码关注云+社区

领取腾讯云代金券