vue使用swiper（轮播图）-真实项目使用

一、安装
我直接安装的vue-awesome-swiper": "^3.1.3"指定版本

npm install vue-awesome-swiper@3.1.3 swiper --save

二、vue页面使用，写了一个小demo

<template><div class="vue-swiper"><h1>{{ msg }}</h1><div class="container"><swiper:options="swiperOption"ref="mySwiper"class="swiper-container-no-flexbox"><!-- 这种写法也可以 --><!-- <swiper-slide><img src="../../static/images/1.jpg" alt class="1"></swiper-slide><swiper-slide><img src="../../static/images/2.jpg" alt class="2"></swiper-slide><swiper-slide><img src="../../static/images/3.jpg" alt class="3"></swiper-slide><swiper-slide><img src="../../static/images/4.jpg" alt class="4"></swiper-slide><swiper-slide><img src="../../static/images/5.jpg" alt class="5"></swiper-slide> --><!-- 这种写法更常见 --><swiper-slide v-for="(item, index) in bugs1" :key="index"><img class="swiper-img" :src="item" alt="" /></swiper-slide></swiper></div></div>
</template><script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import Swiper from "swiper";export default {name: "vueSwiper",data() {return {msg: "Vue-swiper",swiperOption: {notNextTick: true,loop: true, // 启循环模式，即滑动到最后一个 slide 后会自动切换到第一个 slide。slidesPerView: 3,centeredSlides: true,autoplay: {delay: 2000, // 自动播放间隔时间，单位为毫秒disableOnInteraction: false, // 用户操作后是否停止自动播放},forceToAxis: true, //鼠标竖向滚动无法控制横向切换slideToClickedSlide: true, //设置为true则点击slide会过渡到这个slide。grabCursor: true, // 当鼠标位于 swiper 上时显示抓取样式。setWrapperSize: true, // 根据 slides 的尺寸自动调整容器的尺寸。mousewheelControl: true, // 开启鼠标滚轮控制 swiper。observeParents: true, // 如果 swiper 元素有父级元素，并且父级元素的尺寸发生变化时，swiper 会重新初始化。},bugs1: ["http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg","http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg","https://img0.baidu.com/it/u=4281860672,1981139753&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=320","https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",],};},
};
</script><style lang="scss" scoped>
.container {// width: 500px;overflow: hidden;margin: 0 auto;border: 1px solid #000;
}
img {max-width: 100%;display: block;
}
.swiper-slide-shadow-right,
.swiper-slide-shadow-left {background-image: none !important;opacity: 0 !important;
}.swiper-slide {transform: scale(0.7);transition: all 0.3s linear;
}
.swiper-slide.swiper-slide-active {transform: scale(1);
}
@import "../../node_modules/swiper/dist/css/swiper.min.css";
</style>

三、真实项目使用

<template><div class="cve-wrapper"><h1>数据库中找到的 CVE</h1><div class="pcSwiper"><swiper:options="swiperOption"ref="mySwiper"class="swiper-container-no-flexbox"><swiper ref="mySwiper" class="swiper-wrapper1" :options="swiperOption"><swiper-slidev-for="(val, index) in bugs1":key="index"class="swiper-box"><div class="swiperItem"><div class="tag-list"><p class="stag">{{ val.name }}</p><p class="stag">{{ val.reference.length }}个</p></div><div class="ref-list"><template v-for="(value, indexs) in val.reference"><p v-if="indexs < 8" class="stag">{{ value }}</p></template></div></div></swiper-slide></swiper><swiperref="swiper2"style="margin-top: 24px"class="swiper-wrapper2":options="swiperOptions2"><swiper-slidev-for="(val, index) in bugs2":key="index"class="swiper-box"><div class="swiperItem"><div class="tag-list"><p class="stag">{{ val.name }}</p><p class="stag">{{ val.reference.length }}个</p></div><div class="ref-list"><template v-for="(value, indexs) in val.reference"><p v-if="indexs < 8" class="stag">{{ value }}</p></template></div></div></swiper-slide></swiper></swiper></div></div>
</template><script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import bugs from "/@/utils/data/yhBugs";export default {name: "vueSwiper",data() {return {msg: "Vue-swiper",bugs,swiperOption: {spaceBetween: 24,notNextTick: true,loop: true,slidesPerView: 3,centeredSlides: true,autoplay: {delay: 0, // 自动播放间隔时间，单位为毫秒disableOnInteraction: false, // 用户操作后是否停止自动播放},speed: 6000,forceToAxis: true, //鼠标竖向滚动无法控制横向切换slideToClickedSlide: true, //设置为true则点击slide会过渡到这个slide。grabCursor: true,setWrapperSize: true,// mousewheelControl: true,observeParents: true,slidesOffsetBefore: 324,loopAdditionalSlides: 5,},};},computed: {swiperOptions2() {return Object.assign({}, this.swiperOption, { slidesOffsetBefore: 120 });},bugs1() {return this.bugs.slice(0, Math.round(this.bugs.length / 2));},bugs2() {return this.bugs.slice(Math.round(this.bugs.length / 2),this.bugs.length);},},
};
</script>
<style lang="stylus" scoped>
// @import './swiper.min.css';
@import '../../../../node_modules/swiper/dist/css/swiper.min.css';.cve-wrapper {width: 100%;color: #000;background: linear-gradient(180deg, rgba(243, 248, 252, 0.7) 0%, rgba(243, 248, 252, 0.3) 100%);.pcSwiper {margin-bottom: 80px;}.moblieSwiper {display: none;}>h1 {margin: 60px auto 32px;text-align: center;font-style: normal;font-weight: 500;font-size: 24px;line-height: 36px;color: #333333;}.swiper-wrapper1, .swiper-wrapper2 {.swiper-box {background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 80.73%, rgba(255, 255, 255, 0.85) 100%);backdrop-filter: blur(22.5px);border-radius: 4px;width: 384px !important;height: 200px;.tag-list {display: flex;padding: 12px 16px;padding-bottom: 0;.stag {font-style: normal;font-weight: 500;font-size: 14px;color: #666666;background: #F0F6FE;border-radius: 2px;padding: 5px 8px;margin-right: 8px;}}.desc {font-style: normal;font-weight: 700;font-size: 14px;color: #333333;margin-bottom: 14px;padding-left: 16px;}.ref-list {display: flex;flex-wrap: wrap;padding: 10px 16px;padding-top: 0;.stag {border-left: 1px #eee solid;padding: 0 20px;margin-top: 16px;width: 133px;text-align: center;color: #666666;font-style: normal;font-weight: 400;font-size: 14px;}.stag:nth-of-type(1), .stag:nth-of-type(5) {padding-left: 0;border: unset;text-align: left;}}}}
}@media (max-width: 750px) {.swiper-pagination {left: 40%;padding-top: 24px;.swiper-pagination-bullet {margin-left: 12px;}}.cve-wrapper {padding-bottom: 64px;.pcSwiper {display: none;}>h1 {margin: 28px auto 0;}.moblieSwiper {display: block;padding: 0 20px;.mobileItem {background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 80.73%, rgba(255, 255, 255, 0.85) 100%);backdrop-filter: blur(22.5px);border-radius: 4px;margin-top: 20px;.tag-list {display: flex;padding: 12px 16px;padding-bottom: 0;.stag {font-style: normal;font-weight: 500;font-size: 14px;color: #666666;background: #F0F6FE;border-radius: 2px;padding: 5px 8px;margin-right: 8px;}}.ref-list {display: flex;flex-wrap: wrap;padding: 10px 16px;padding-top: 0;.stag {border-left: 1px #eee solid;padding: 0 20px;margin-top: 16px;width: 120px;text-align: center;color: #666666;font-style: normal;font-weight: 400;font-size: 14px;}.stag:nth-of-type(2n+1) {padding-left: 0;border: unset;text-align: left;}}}}}
}
</style>

yhBug.ts 文件

interface OpensourceDatabaseBug {name: stringreference: string[]
}type OpensourceDatabaseBugs = Array<OpensourceDatabaseBug>const bugs: OpensourceDatabaseBugs = [
{name: 'MySQL 8.0.27',reference: ['CVE-2022-21509','CVE-2022-21526','CVE-2022-21527','CVE-2022-21528','CVE-2022-21529','CVE-2022-21530','CVE-2022-21531','CVE-2022-21438','CVE-2022-21459','BUG 106045','BUG 106047','BUG 106048','BUG 106050','BUG 106051','BUG 106058','BUG 106061','BUG 106055']
},
{name: 'MySQL 8.0.29',reference: ['BUG 108241','BUG 108242','BUG 108243','BUG 108244','BUG 108246','BUG 108247','BUG 108248','BUG 108249','BUG 108251','BUG 108252','BUG 108253','BUG 108254','BUG 108255']
},
{name: 'MariaDB 10.3.35',reference: ['N1DEV-28501','MDEV-28502','MDEV-28503','MDEV-28504','MDEV-28505','MDEV-28506','MDEV-28507','MDEV-28508','MDEV-28509','MDEV-28510','MDEV-28614','MDEV-28615','MDEV-28616','N1DEV-28617','MDEV-28618','MDEV-28619','MDEV-28620','N1DEV-28621','MDEV-28622','MDEV-28623','MDEV-28624']
},
{name: 'MariaDB 10.10.0',reference: ['MDEV-29358','MDEV-29359','MDEV-29360','N1DEV-29361','MDEV-29362','MDEV-29363']
},
{name: 'OceanBase 3.1.4',reference: ['issues 986','issues 987','issues 988','issues 989','issues 995','issues 1000']
}
]export default bugs

demo 我放在github上了，如需要请自取：swiper-vue