2022-05-24 工作记录--React-swiper3的运用 + 手动切换swiper后,自动播放停止

一、React-swiper3的运用

在React中使用swiper3：

• 大致实现方法还是按照swiper官网里的步骤来的，只是引入swiper的方法些许有所不同☺️，小萝卜儿们请往下看哟~

第一步、安装swiper

先观察package.json中是否安装了swiper：

• 未安装滴话，就在终端输入：npm i swiper@3 或者 yarn add swiper@3
  • @3：限制安装的swiper版本为3.0（若想安装最新版本，省略即可）
• 已安装滴话，就无需操作上述步骤；

第二步、引入swiper

1、在对应页面的jsx中输入以下代码：

import Swiper from "swiper"; // 引入swiper，实现轮播

2、在对应页面的less/css里导入swiper.css，比如：

@import "../../../node_modules/swiper/dist/css/swiper.css";

并参考swiper官网、根据项目需求写入以下代码：

 .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
  
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

第三步、初始化swiper

❀ 在componentDidMount生命周期中 初始化swiper，比如：

componentDidMount() {
    // 定时器，防止轮播图只播放一次就不播放了【视情况而加】
    setTimeout(() => {
      // 初始化swiper
      new Swiper(".swiper-container1", {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 1500, // 自动播放
        autoplayDisableOnInteraction: false, // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
        loop: true, // 循环播放
      });
    }, 500)
}

第四步、书写swiper的html部分

❀ 方法同swiper官网上的用法，比如：(已进行数据交互☺️)

render() {
    return (
      <div>
        {/* Swiper */}
        <div className="swiper-container swiper-container1">
          <div className="swiper-wrapper">
            {
              this?.state?.imgData?.map((item, index) => {
                return (
                  <div className="swiper-slide swiper-slide1" key={index}>
                    <div className="banner_img">
                      <img src={item} alt="" />
                    </div>
                  </div>
                )
              })
            }
          </div>
          {/* Add Pagination */}
          <div className="swiper-pagination"></div>
        </div>
      </div>
    );
  }

最终效果，如下图：

二、手动切换swiper后,自动播放停止

1、问题分析

swiper轮播中，如果手动左右滑动轮播图 或 点击下方的小圆点切换轮播图后，轮播图就不会自动播放了。

2、问题解决

因为这是swiper3.x版本，所以查阅swiper官网中swiper3.x版本的API文档 可找到如下图所示的属性 解决该问题。【其余版本在官网中查看对应文档即可哟~】

• 即：初始化swiper时，设置autoplayDisableOnInteraction为false。

example：

componentDidMount() {
    // 定时器，防止轮播图只播放一次就不播放了
    setTimeout(() => {
      // 初始化swiper
      new Swiper(".swiper-container1", {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 1500, // 自动播放
        autoplayDisableOnInteraction: false, // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
        loop: true, // 循环播放
      });
    }, 500)
}