2022-12-18 工作记录--React/Swiper-数据小于等于n时，非轮播、居中展示；大于n时，轮播展示

一、实现效果

奖品列表内容:

• a. 奖品配置不超过四个时：居中展示，不可滑动;
• b. 奖品配置超过四个时：循环轮播展示，以2s/个速度向左轮播，用户可左右划动切换，停止操作后恢复自动轮播。

小于等于4个时 居中展示，不可轮播：

二、配置swiper

react-swiper8

1、安装swiper8

注意：最好和我安装一样滴版本哦，否则会出现部分bug，比如：@9版本里，loop循环播放失效了。

npm i swiper@8

或者

yarn add swiper@8

2、在app.jsx全局引入

app.jsx

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

三、实现代码

1、先封装子组件swiperComponent

swiperComponent.jsx

{/* 奖品列表内容: 
      a. 奖品配置不超过四个时：居中展示，不可滑动;
      b. 奖品配置超过四个时：轮播展示，以2s/个速度向左轮播，用户可左右划动切换，停止操作后恢复自动轮播 
*/}
"use strict";

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

import "./swiperComponent.less";

@observer
class SwiperComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { prizeList } = this.props || {};
        return (
            <div className="swiperComponent">
                <Swiper
                    className="prizes_list_content"
                    // 【关键】设置slider容器能够同时显示的slides数量(carousel模式)
                    slidesPerView={4}
                    // 在slide之间设置距离（单位px）
                    spaceBetween={8}
                    // 【关键】循环播放
                    loop={prizeList?.length > 4 ? true : false}
                    // 滑动速度
                    speed={1500}
                    // 自动播放
                    autoplay={{
                        // 隔×秒自动滑动一次
                        delay: 2000,
                        // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
                        disableOnInteraction: false,
                    }}
                    // 【关键】当slides的总数小于slidesPerView时，slides居中【不适用于loop模式和slidesPerColumn】
                    centerInsufficientSlides={true}
                >
                    {
                        prizeList?.length > 0 &&
                        prizeList?.map((item, index) => {
                            return <SwiperSlide className="prize_item" key={index}>
                                <div className="prize_img_bg">
                                    {/* 奖品图片 */}
                                    <div className="prize_img">
                                        <img src={item.img} alt="" />
                                    </div>
                                </div>
                                <div className="prize_name_bg">
                                    {/* 奖品名称 */}
                                    <span className="prize_name">{item.name}</span>
                                </div>
                            </SwiperSlide>
                        })
                    }
                </Swiper>
            </div>
        );
    }
}

export default SwiperComponent;

swiperComponent.less

@import "../../res.less";
.swiperComponent {
    width: 100%;
    height: 100%;
    .prizes_list_content {
        width: 100%;
        height: 100%;
        .prize_item {
          width: 158px;
          height: 260px;
          position: relative;
          .prize_img_bg {
            width: 158px;
            height: 158px;
            left: 0px;
            top: 0px;
            position: absolute;
            .sparkBg("page_home/prize_img.png");
            .prize_img {
              width: 142px;
              height: 142px;
              left: 8px;
              top: 8px;
              position: absolute;
              border-radius: 20px;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 20px;
              }
            }
        }
        .prize_name_bg {
          width: 158px;
          height: 93px;
          left: 0px;
          top: 167px;
          position: absolute;
          .sparkBg("page_home/prize_name_bg.png");
          .prize_name {
            width: 123px;
            left: 18px;
            top: 18px;
            position: absolute;
            font-size: 24px;
            line-height: 29px;
            text-align: center;
            color: #fcfcfc;
            opacity: .85;
            .texts-hidden-ellipsis();
          }
        }
    }
  }
}

res.less

/** 多行显示省略号 */
.texts-hidden-ellipsis(@clamp:2) {
  -webkit-box-orient: vertical; // 避免压缩后删除此行
  -webkit-line-clamp: @clamp; // 显示省略号行数
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

2、父页面homePage

homePage.jsx

'use strict';

import React from 'react';
import { observer } from 'mobx-react';
import SwiperComponent from "@src/components/swiperComponent/swiperComponent"; // 引入 封装好的swiper组件

import './homePage.less';

@observer
class HomePage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const prizeData = Array(3).fill(''); // ['','','']

    return (
      <div className="homePage">
        <div className="prizes">
          <SwiperComponent prizeList={prizeData} />
        </div>
      </div>
    );
  }
}

export default HomePage;

homePage.less

.homePage {
  width: 100%;
  height: 1024px;
  left: 0px;
  top: 0;
  position: absolute;
  .prizes {
    width: 666px;
    height: 260px;
    left: 22px;
    top: 29px;
    position: absolute;
  }
}