zqy233的前端学习笔记

主题

回到顶部
索引

如何在vue中使用

不指定版本，则安装最新的swiper8

js
npm i -s swiper

npm i -s swiper

使用vue组件

vue
<template>
  <swiper :slides-per-view="3">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {}
  },
}
</script>
<style>
.swiper {
  width: 1240px;
  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);
}
</style>

<template>
  <swiper :slides-per-view="3">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {}
  },
}
</script>
<style>
.swiper {
  width: 1240px;
  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);
}
</style>

slides-per-view

每个视图的幻灯片数

js
<swiper :slides-per-view="3">
  ...
</swiper>

<swiper :slides-per-view="3">
  ...
</swiper>

space-between

每个视图的幻灯片间距

js
<swiper :slides-per-view="3" :space-between="50">

<swiper :slides-per-view="3" :space-between="50">

modules

  1. 导入模块import { EffectCards } from "swiper"
  2. 导入样式import "swiper/css/effect-cards"
  3. 绑定模块:modules="[EffectCards]"

有以下effect属性

sh
- EffectFade fade
- EffectCube cube
- EffectCoverflow coverflow
- EffectFlip flip
- EffectCards cards
- EffectCreative creative

- EffectFade fade
- EffectCube cube
- EffectCoverflow coverflow
- EffectFlip flip
- EffectCards cards
- EffectCreative creative

cards

vue
<template>
  <swiper :slides-per-view="1" :space-between="50" :modules="[EffectCards]" effect="cards">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script setup>
import { EffectCards } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
import "swiper/css/effect-cards"
</script>

<template>
  <swiper :slides-per-view="1" :space-between="50" :modules="[EffectCards]" effect="cards">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script setup>
import { EffectCards } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
import "swiper/css/effect-cards"
</script>

cube

vue
<template>
  <swiper :modules="[EffectCube]" effect="cube">
    ...
  </swiper>
</template>
<script setup>
import { EffectCube } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
import "swiper/css/effect-cube"
</script>

<template>
  <swiper :modules="[EffectCube]" effect="cube">
    ...
  </swiper>
</template>
<script setup>
import { EffectCube } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
import "swiper/css/effect-cube"
</script>

pagination

底部页数信息

vue
<template>
  <swiper
    :modules="[EffectCube, Pagination]"
    :pagination="{
      type: 'fraction',
    }"
    effect="cube"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script setup>
import { EffectCube, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
import "swiper/css/effect-cube"
</script>

<template>
  <swiper
    :modules="[EffectCube, Pagination]"
    :pagination="{
      type: 'fraction',
    }"
    effect="cube"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script setup>
import { EffectCube, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
import "swiper/css/effect-cube"
</script>

实现堆叠卡片

vue
<template>
  <swiper
    :slides-per-view="3"
    :loop="true"
    :modules="modules"
    :centered-slides="true"
    :pagination="{
      type: 'fraction',
    }"
    effect="cube"
  >
    <swiper-slide>
      <img src="./assets/1.png" alt="" srcset="" />
    </swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
  </swiper>
</template>
<script setup>
import { Pagination, Autoplay } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"

const modules = [Pagination]
</script>
<style>
.swiper {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 1240px;
}
.swiper-slide {
  width: 497px;
  height: 197px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  transition: transform 0.3s ease;
}
.swiper-slide-active {
  overflow: hidden;
  transform: scale(1.4);
  z-index: 1;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<template>
  <swiper
    :slides-per-view="3"
    :loop="true"
    :modules="modules"
    :centered-slides="true"
    :pagination="{
      type: 'fraction',
    }"
    effect="cube"
  >
    <swiper-slide>
      <img src="./assets/1.png" alt="" srcset="" />
    </swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
    <swiper-slide><img src="./assets/1.png" alt="" srcset="" /></swiper-slide>
  </swiper>
</template>
<script setup>
import { Pagination, Autoplay } from "swiper"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"

const modules = [Pagination]
</script>
<style>
.swiper {
  padding-top: 40px;
  padding-bottom: 40px;
  width: 1240px;
}
.swiper-slide {
  width: 497px;
  height: 197px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  transition: transform 0.3s ease;
}
.swiper-slide-active {
  overflow: hidden;
  transform: scale(1.4);
  z-index: 1;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
  1. 标题改最大负荷，两个图表合并，加年月选择器
  2. 地区负荷率统计去掉（单位：%）
  3. 调度用电-日用电电力电量同期比独占一行
  4. 电量分析-单位改成亿千瓦时
  5. 调度运行-右侧背景色
  6. 风险预警-空一点
  7. 滚动条贴右
  8. 人员概括-调控人员-调度系统人员基本信息 添加输入框查询导出按钮 （等后端实现再调整前端）
  9. 电厂用户-按钮组放置右侧

Released under the MIT License.

Copyright © 2022.4-2024.7