2022-07-26 工作记录--React-swiper@6以上的使用

React-swiper@6以上的使用

一、官方文档 ⭐️

（一）、查看对应参数

第1步、进入swiper官网

选择「中文教程」下的「在React中使用Swiper」，如下图：

第2步、查看Demos

滑动到最下方，按如下图点击操作：

第3步、进入如下图页面查看对应参数

（二）、查看对应方法

链接：https://swiperjs.com/swiper-api#method-swiper-slidePrev

二、安装swiper ⭐️

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

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

三、引入swiper ⭐️

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

import { Swiper, SwiperSlide } from "swiper/react"; // 引入swiper,实现轮播
import 'style-loader!css-loader!swiper/swiper-bundle.css'; // 引入swiper的css

若出现报错 ，则改成下面写法

import { Swiper, SwiperSlide } from "swiper/react"; // 引入swiper,实现轮播
import 'swiper/swiper-bundle.css'; // 引入swiper的css

2、在app.jsx中按需引入

【重点】 假如需要使用到 Autoplay（自动播放）、Pagination（分页）、Navigation（标记页数），则引入对应滴即可哦~ 比如：❀

// swiper【Autoplay:自动播放 ,Pagination:分页 ,Navigation:标记页数】
import SwiperCore, {Autoplay,Pagination,Navigation} from 'swiper/core';
SwiperCore.use([Autoplay,Pagination,Navigation])

若出现报错 ：Uncaught Error: Cannot find module 'swiper/core'，则改成下面写法

// swiper【Autoplay:自动播放 ,Pagination:分页 ,Navigation:标记页数】
import SwiperCore, {Autoplay,Pagination,Navigation} from 'swiper';
SwiperCore.use([Autoplay,Pagination,Navigation])

四、案例 ⭐️

1、对应代码

homePage.jsx

import React, { Component } from 'react';
import { Swiper, SwiperSlide } from "swiper/react"; // 引入swiper,实现轮播
import 'style-loader!css-loader!swiper/swiper-bundle.css'; // 引入swiper的css
import './homePage.less';

class HomePage extends Component {

  state = {
    activeIndex: 1, // 初始化 轮播到的slide索引值
  }

  componentDidMount() {
    this.swiperChange(); // 切换轮播
  }

  // 切换轮播
  swiperChange = () => {
    const { eggSwiper } = this;

    // 金蛋轮播 eggSwiper
    eggSwiper.on('slideChange', function () {
      // console.info('非循环播放时, 金蛋轮播-eggSwiper当前索引值: ',eggSwiper.activeIndex);
      // 金蛋个数为3
      const currentIndex = Number((eggSwiper.activeIndex + 3) % 3);
      console.info('循环播放时, 金蛋轮播-eggSwiper当前索引值: ', currentIndex);

      this.setState({
        activeIndex: currentIndex,
      })
    });

  }

  // 点击「左箭头」
  toLeft = () => {
    const { eggSwiper } = this;
    eggSwiper.slidePrev(); // 上滑一页
  }

  // 点击「右箭头」
  toRight = () => {
    const { eggSwiper } = this;
    eggSwiper.slideNext(); // 下滑一页
  }

  render() {
    // activeIndex: 轮播到的slide索引值
    const { activeIndex } = this.state;

    return (
      <div __examplenotes="金蛋区" className="goldenEggsArea">
        {/* 底座 */}
        <span className="base"></span>
        {/* 左箭头 */}
        <div className="leftArrow" onClick={this.toLeft}></div>
        {/* 右箭头 */}
        <div className="rightArrow" onClick={this.toRight}></div>
        {/* Swiper */}
        <Swiper
          className="goldenEggsContent"
          // 设置slider容器能够同时显示的slides数量(carousel模式)
          slidesPerView={3}
          // 设定为true时，active slide会居中，而不是默认状态下的居左(false)
          centeredSlides={true}
          // 滑动速度
          speed={1500}
          // 在slide之间设置距离（单位px）
          // spaceBetween={10}
          // 设定初始化时slide的索引，Swiper默认初始化时显示第一个slide: initialSlide={0}
          initialSlide={1}
          // 循环播放
          loop={true}
          // 自动播放
          // autoplay={{
          // // 隔×秒自动滑动一次
          // delay: 1000,
          // // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
          // disableOnInteraction: false,
          // }}
          // 左右箭头
          navigation={true}
          // 标记页数
          // pagination={{
          //  clickable: true,
          // }}
          // 当我们需要调用swiper里的方法时
          onSwiper={swiper => { this.eggSwiper = swiper; }}
        >
          {
            Array(3).fill('')?.map((item, index) => {
              return (
                <SwiperSlide key={index}>
                  <div __examplenotes="金蛋图片" className="goldenEggItem">
                    <img src={`首页/金蛋${index}.png`} alt="" />
                  </div>
                  <div __examplenotes="标签" className="label">
                    {
                      activeIndex == index ?
                        <img src={`首页/标签${index}（大）.png`} alt="" />
                        :
                        <img src={`首页/标签${index}.png`} alt="" />
                    }
                  </div>
                </SwiperSlide>
              )
            })
          }
        </Swiper>
      </div>
    );
  }
}

export default HomePage;

homePage.less

.goldenEggsArea {
   width: 665px;
   height: 407px;
   left: 38px;
   top: 137px;
   position: absolute;
   .eggUpdateAni {
     width: 750px;
     height: 1624px;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     position: absolute;
   }
   .base {
     width: 609px;
     height: 150px;
     left: 28px;
     top: 257px;
     position: absolute;
     background: url('首页/底座.png') no-repeat center/cover;
   }
   /** 左箭头 */
   .leftArrow {
     width: 62px;
     height: 62px;
     left: 0px;
     top: 198px;
     position: absolute;
     background: url('首页/左箭头.png') no-repeat center/cover;
   }
   /** 右箭头 */
   .rightArrow {
     width: 62px;
     height: 62px;
     left: 608px;
     top: 198px;
     position: absolute;
     background: url('首页/右箭头.png') no-repeat center/cover;
   }
   /** .disabled {
      opacity: 0.35;
      cursor: auto;
      pointer-events: none;
    } */
   .goldenEggsContent {
     width: 524px;
     height: 389px;
     left: 71px;
     top: 0px;
     position: absolute;
     .goldenEggItem {
       width: 130px;
       height: 238px;
       position: absolute;
       bottom: 75px;
       left: 50%;
       transform: translateX(-50%);
       transition: all .5s;
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
     .label {
       width: 140px;
       height: 48px;
       left: 50%;
       transform: translateX(-50%);
       top: 305px;
       position: absolute;
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
     /** 当前slide */
     .swiper-slide-active {
       .goldenEggItem {
         width: 181px;
         height: 327px;
         bottom: 62px;
       }
       .label {
         width: 190px;
         height: 86px;
         top: 303px;
         }
     }
   }
   /** swiper默认的左箭头 */
   .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
      display: none;
      &::after {
        display: none;
      }
    }
    /** swiper默认的右箭头 */
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
      display: none;
      &::after {
        display: none;
      }
    }
}

2、最终效果

五、补充、按需修改对应页面的less/css

1、假如需要修改 默认的左右箭头的样式（eg.背景图、宽高、位置等），举例如下：

/** 左箭头 */
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    width: 80px;
    height: 80px;
    left: -1px;
    top: 280px;
    position: absolute;
    background-image: url('美食集卡页/左箭头.png');
    &::after {
      display: none;
    }
}
/** 右箭头 */
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    width: 80px;
    height: 80px;
    right: 1px;
    top: 280px;
    position: absolute;
    background-image: url('美食集卡页/右箭头.png');
    &::after {
      display: none;
    }
}

2、假如需要修改 默认的标记页数的样式（eg.背景颜色、宽高、位置等），举例如下：

/** 标记页数 */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
   bottom: 0!important;
   left: 0;
   width: 100%;
}
.swiper-pagination .swiper-pagination-bullet {
   background: #007aff;
   width: 14px;
   height: 14px;
   margin: 0 8px;
}
.swiper-pagination .swiper-pagination-bullet-active {
   background: #334268;
}