- 安装依赖
安装vue-awesome-swipe:
npm i vue-awesome-swiper@3.1.3 -S
安装swiper依赖
npm install swiper
注意:ue-awesome-swipe要注意安装的版本,3版本的比较不踩雷
- 局部引入组件(因为只有一个页面使用到了这个)
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
- 使用组件
HTML的代码
<div class="recommendPage">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in slideOptions" :key="item.name">
<a-card
class="cardClass"
hoverable
style="height: 260px"
@click="toDetail()"
>
<a-row>
<a-col :span="6">
<a-icon type="mail" theme="twoTone" :style="{fontSize:'60px'}"/>
</a-col>
<a-col :span="18">
<span :style="{fontWeight:'bold',fontSize:'16px'}">{{item.name}}</span>
<a-row :style="{marginTop:'20px'}">
<a-col :span="12">
<a-statistic
:value-style="{ color: 'rgb(82, 192, 254)' }"
title="接入总条数" :value="item.value" />
</a-col>
<a-col :span="12">
<a-statistic
title="最新日期接入总条数"
:value-style="{ color: 'rgb(82, 192, 254)' }"
:precision="2" :value="112893"/>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-statistic
title="最早数据日期"
:value-style="{ color: 'rgb(82, 192, 254)' }"
:value="112893" />
</a-col>
<a-col :span="12">
<a-statistic
:value-style="{ color: 'rgb(82, 192, 254)' }"
title="最新数据日期"
:precision="2" :value="112893"/>
</a-col>
</a-row>
</a-col>
</a-row>
<template :style="{height:'30px'}" #actions>
<a-row>
<a-col :span="12"><span>奇安信</span></a-col>
<a-col :span="12"><span>份数据</span></a-col>
</a-row>
</template>
</a-card>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div
class="swiper-button-next"
slot="button-next"></div>
</swiper>
</div>
配置需要的option项(写在了data中)
这个根据自己需要的内容去写,可以参考官网给出的例子和api去配置参数
swiperOption: {
// loop: true, // 循环往复的方式
// 展示三个
slidesPerView: 3,
slidesPerGroup: 3,
// slidesOffsetBefore: 0,
loopFillGroupWithBlank: true,
// 宽度
width: 1450,
spaceBetween: 50,
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: false,
// },
// 显示分页
// pagination: {
// el: '.swiper-pagination',
// clickable: true,
// },
// 设置点击箭头
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
- 配置style的参数(根据需要去设置)
.cardClass{
box-shadow: 0 0 20px #eee;
}
.recommendPage .swiper-container{
position: relative;
width: 100%;
height: 200px;
background: #fff;
}
.recommendPage{
width: '100%';
}
.recommendPage .swiper-container .swiper-slide{
width: 100%;
line-height: 200px;
background: #fff;
color: #000;
font-size: 16px;
text-align: center;
}
- 最终效果: