study / 学习使用Swiper

贴官网：Swiper

最近使用Swiper写了个组件，完成以下内容：

设置三个页面每隔10秒自动轮播。设置页脚可点击换页。鼠标移入界面后停止轮播，移出后继续

总结遇到的问题做个记录，准备贴代码：

1. 初始化Swiper

componentDidMount() {
    if (window.Swiper) {
      const swiper = new window.Swiper('.swiper-container', {          // 1
        direction: 'horizontal',                                       // 2
        loop: true,                                                    // 3
        autoplay: {                                                    // 4
          delay: 10000
        },
        pagination: {                                                  // 5
          el: '.swiper-pagination',
          clickable: true
        }
      });
      swiper.on('slideChange', () => {
        this.forceUpdate();
      });

      const container = document.getElementById('swiper_container');   // 6
      container.onmouseenter = () => {
        swiper.autoplay.stop();
      };
      container.onmouseleave = () => {
        swiper.autoplay.start();
      };
    }
  }

(1) 通过new进行初始化，设置外层Swiper容器的css选择器：**’.swiper-container’**

(2) direction设置滚动方向：horizontal 水平方向切换

(3) loop设置循环为true后，Swiper会自动在轮播页面的前后分别复制页面来实现循环的设置。如果不设置，在播放完最后一页后，动画改为向前跳转到第一页，而不是向后继续轮播。

在添加loop设置循环后出现问题:

轮播过程中偶尔出现某一页节点正确显示，但数据没有显示的问题。在网上查看了些大概确定原因是，Swiper在复制页面时仅复制了节点信息。

解决办法：通过实例的on方法，监听slideChange事件，在切换事件执行后强制界面刷新。

(4) autoplay设置自动播放，延时10秒。即每10秒切换界面

(5) pagination设置分页器：
el：分页器容器的css选择器，render时，将分页器节点放在container中的最底部。
clickable：设置为true用来控制分页器点击时的页面切换

(6) 设置鼠标移入移除事件: 此处通过ById来获取容器的节点，也可以通过class

在容器的 onmouseenter/onmouseleave上分别设置swiper自动播放的结束/开始，可以实现鼠标移入停止自动轮播，移出继续计时自动轮播。

2. render部分

render() {
    const {children} = this.props;

    return (
      <div className='swiper-container swiper-no-swiping' id='swiper_container'>
        <div className='swiper-wrapper'>
          {(children || []).map((child) => {
            return <div className='swiper-slide'>{child}</div>;
          })}
        </div>
        <div className='swiper-pagination' />
      </div>
    );
  }

(1) 设置 ‘swiper-no-swiping’ 类名，用来控制slide无法拖动

3. 样式部分设置

<style type="text/css">
  .swiper-container{
    --swiper-theme-color: #ff6600;          /* 设置Swiper风格 */
    --swiper-navigation-color: #308376      /* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;         /* 设置按钮大小 */
  }
</style>

4. 使用该组件时

import Carousel from 'carousel';

...

const contentStyle = {
    width: '100%',
    height: '160px'
};

...

<Carousel>
    <div style={contentStyle}>第一页</div>
    <div style={contentStyle}>第二页</div>
    <div style={contentStyle}>第三页</div>
</Carousel>

以上仅记录实现需求所用到的属性和方法，更多api见官网。

1. 初始化Swiper
2. render部分
3. 样式部分设置
4. 使用该组件时