接到一个需求是对echarts图标进行轮播
例图:
下面的两个点代表轮播切换
安装swiper
npm install swiper@5.4.5 //据说这个版本稳定一点
swiper的使用方法:
https://www.swiper.com.cn/usage/index.html
在项目中应用swiper
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide1">Slide 1</div>
<div class="swiper-slide swiper-slide2">Slide 2</div>
<div class="swiper-slide swiper-slide3">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
// config...
})
}
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
.swiper-container {
width: 500px;
height: 400px;
}
.swiper-slide {
text-align: center;
line-height: 400px;
color: #b0b0b0;
}
.swiper-slide1 {
background: red;
}
.swiper-slide2 {
background: blue;
}
.swiper-slide3 {
background: yellow;
}
</style>
此时已经能滚动了
然后将swiper-slide修改成echarts图
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div v-for="(item,index) in 5" :key="index" class="swiper-slide">
<EquipmentType :id="item.id" :ref="item.ref" :optionLine="item.option" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
这个时候出现了一个问题
原因是我在组件中是给echarts的父盒子设了高度,没有给echarts自己设高度,给他设立高度之后就能撑起来了。
下面swiper默认的分页器是圆点,如果要改成自定义样式需要重新写css
<style >
.swiper-pagination {
bottom: 15px !important;
}
.swiper-pagination-bullet {
background-color: #def7ff !important;
width: 44px;
height: 8px;
transform: skew(20deg);
border-radius: 0;
}
.swiper-pagination-bullet-active {
background-color: #01ffff !important;
}
</style>
注意:!!!不要写在scoped里面