swiper + 网易云api 实现音乐卡片[1]

用户4793865

发布于 2023-01-12 13:21:45

8400

发布于 2023-01-12 13:21:45

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

swiper

Swiper提供了多种的轮播样式组件。虽然一些常用的框架中提供了轮播组件，大部分情况我们也会选择去使用Swiper。

官网

官网提供了传统的html的使用方式、Vue的使用方式、React的使用方式....。中文官网我没有找到具体的示例代码，我们来看英文官网。Demo中有着我们需要的例子

我们这里用到的是Effect Cards然后在SendBoxCode打开React的代码

熟悉一下代码

先看main.jsx文件。这是这个项目的主文件，这里引入了react，然后还引入了两个css文件:(swiper/css/bundle和自己定义的css文件)

// main.jsx
import React from "react";
import ReactDOM from "react-dom";
// eslint-disable-next-line
import "swiper/css/bundle";
import "./styles.css";
import App from "./App.jsx";
ReactDOM.render(<App />, document.getElementById("app"));

这里引入了 Swiper, SwiperSlide 组件，还引入了 swiper/css 和 swiper/css/effect-cards两个swiper的样式文件。因为使用EffectCards还需要引入EffectCards。

effect={"cards"} 把轮播设置为卡片类型
modules={[EffectCards]} 把卡片再设置成这种层叠效果的卡片

然后使我们自定义的样式，这里给每张卡片添加了不同的颜色

```js
#app {
  height: 100%;
}
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

html,
body {
  position: relative;
  height: 100%;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 240px;
  height: 320px;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.swiper-slide:nth-child(1n) {
  background-color: rgb(206, 17, 17);
}

.swiper-slide:nth-child(2n) {
  background-color: rgb(0, 140, 255);
}

.swiper-slide:nth-child(3n) {
  background-color: rgb(10, 184, 111);
}

.swiper-slide:nth-child(4n) {
  background-color: rgb(211, 122, 7);
}

.swiper-slide:nth-child(5n) {
  background-color: rgb(118, 163, 12);
}

.swiper-slide:nth-child(6n) {
  background-color: rgb(180, 10, 47);
}

.swiper-slide:nth-child(7n) {
  background-color: rgb(35, 99, 19);
}

.swiper-slide:nth-child(8n) {
  background-color: rgb(0, 68, 255);
}

.swiper-slide:nth-child(9n) {
  background-color: rgb(218, 12, 218);
}

.swiper-slide:nth-child(10n) {
  background-color: rgb(54, 94, 77);
}

在我的项目中使用

Songs.tsx

import { Avatar, Dropdown, Layout, Nav, Typography } from '@douyinfe/semi-ui';
import {
  Route,
  Routes,
  NavLink,
  BrowserRouter,
  Link,
  useNavigate,
} from 'react-router-dom';
import * as React from 'react';
import useFetch from '../../../../utils/useFetch';
import { recommendSongs } from '../../../apis/api';
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectCards } from 'swiper';
import style from './index.module.scss';
import 'swiper/css/effect-cards';
import 'swiper/css/bundle';
import 'swiper/css';
const { useState } = React;
const { Title } = Typography;
const Songs: React.FC = () => 
  return (
    <div className={style.container}>
      <Swiper
        effect={'cards'}
        grabCursor={true}
        modules={[EffectCards]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </div>
  );
};
export default Songs;

index.module.scss

    .swiper-cards {
        overflow: visible;
    }
    .swiper {
        width: 20%;
        height: 220px;
      }
    .swiper-slide {
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }
    

.swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }
  
  .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }
  
  .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }
  
  .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
  }
  
  .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
  }
  
  .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
  }
  
  .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
  }
  
  .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
  }
  
  .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
  }
  
  .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
  }

将代码直接到我的项目中，发现卡片的效果并没有出来，就连卡片颜色的效果也没实现。

后来发现，需要将样式放入 :global中

:global{
    .swiper-cards {
        overflow: visible;
    }
    .swiper {
        width: 20%;
        height: 220px;
      }
    .swiper-slide {
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
      }
    

.swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }
  
  .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }
  
  .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }
  
  .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
  }
  
  .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
  }
  
  .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
  }
  
  .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
  }
  
  .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
  }
  
  .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
  }
  
  .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
  }

然后就实现了我们想要的卡片效果