swiper + 网易云api 实现音乐卡片[1]
API 实现 音乐 网易 卡片 swiper
2023-06-13 09:16:41 时间
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);
}
然后就实现了我们想要的卡片效果
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 用 shell 脚本做 restful api 接口监控
- 【SSM进阶之路】使用Spring SqlSessionTemplate API实现查询数据[通俗易懂]
- 开源的网易云音乐API项目都是怎么实现的?
- 微服务架构开发实战:API网关意义和常见API网关的实现方式
- js免费调用天气API
- vppinfra---socket api
- 打包 Composition API、Vue3
- SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示试读版
- 深入实战探究 Vue 2.7 Composition API 的强大之处
- 使用百度地图api通过redis实现地标存储及范围坐标点查询功能
- 用 Java 自带的 API 实现的超轻量级的 HTTP 服务器详解编程语言
- MySQL Status Ndb_api_wait_nanos_count_slave 数据库状态作用意思及如何正确
- 异步API的精彩之处:Redis实现快速响应(redis异步api)
- Java数据持久层框架 MyBatis之API学习七(动态 SQL详解)编程语言
- Linux加密API:安全加固保护您的数据(linux加密api)
- MySQL API下载:快速简单实现数据交互(mysqlapi下载)
- 时间Java API实现Redis设置过期时间(redisjava过期)
- 清理Redis Java API实现过期清理(redisjava过期)
- MySQL C API实现数据库应用程序(mysql的c语言api)
- 数据一步一步学习如何用C API导出MySQL数据(c api导出mysql)
- 数据库存储的API文档从离线文件变有效信息(api文档存mysql)
- 快速下载API数据使用MySQL实现(mysql下载api数据)
- 学习Oracle中API文档,路更顺畅(oracle中api文档)
- 基于Oracle API的开发之路(oracle api开发)
- Redis读写分离API实现提升效率(redis读写分离api)
- c#之利用API函数实现动画窗体的方法详解
- C#中通过API实现的打印类实例代码