vue swiper 实战
Sonder
2020-10-05
5153字
13分钟
浏览 (3.3k)
1. vue awesome swiper
安装
vue-awesome-swiper要和swiper配合使用
npm：
npm install vue-awesome-swiper@4.1.1 --save
npm install swiper@5.0.2 --savepackage.json：
"swiper": "^5.0.2",
"vue-awesome-swiper": "^4.1.1",注意版本
此处版本是个坑，版本不匹配，文件路径都不一致，肯定会有问题！！
不说明版本的demo都是耍流氓！！
代码如下
<template>
<div class="pc-game mt-20" @mouseover="btnHover = true" @mouseleave="btnHover = false">
<div class="pc-game-title mt-20 mb-20">
<a href="" class="text-aaa">查看全部</a>
</div>
<div @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
<swiper class="swiper" ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="(item,index) in arr" :key="index">
<img :src="tymydImg" alt="">
<div class="text-565 img-text f14">{{ item.text }}</div>
</swiper-slide>
</swiper>
</div>
<div :class="['prev-next', {'show':btnHover}]">
<button type="button" slot="button-prev" class="prev el-carousel__arrow el-carousel__arrow--left"><i class="el-icon-arrow-left"></i>
</button>
<button type="button" slot="button-next" class="next el-carousel__arrow el-carousel__arrow--right"><i class="el-icon-arrow-right"></i>
</button>
</div>
</div>
</template>
<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: "pcGame",
components: {
Swiper,
SwiperSlide
},
data() {
return {
/**
* 前进后退按钮
*/
btnHover: false,
arr: [
{
text: '天涯明月刀'
},
{
text: '天涯明月刀'
},
{
text: '天涯明月刀'
},
{
text: '天涯明月刀'
},
{
text: '天涯明月刀'
},
{
text: '天涯明月刀'
}
],
swiperOptions: {
slidesPerView: 6,
spaceBetween: 5,
speed: 2000,//匀速时间
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop: true,
freeMode: false,
freeModeMomentum: true,
navigation: {
nextEl: '.prev',
prevEl: '.next',
hideOnClick: true
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
methods: {
// 移出
on_bot_leave() {
this.swiper.autoplay.start();
},
// 移入
on_bot_enter () {
this.swiper.autoplay.stop()
}
}
}
</script>
<style lang="scss">
.pc-game {
background-color: #fff;
overflow: hidden;
position: relative;
.pc-game-title {
padding: 0 20px;
display: flex;
justify-content: space-between;
}
.swiper {
width: 1090px;
padding: 15px;
overflow: hidden;
border-radius: 5px;
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
cursor: pointer;
transition: all 0.3s;
a {
width: 100%;
img {
background: #dcdcdc;
border-radius: 5px;
height: 130px;
box-shadow: 0 2px 13px 0 rgba(0, 0, 0, .06);
&:hover {
box-shadow: 0 2px 13px 0 #4A90E2;
}
}
.img-text {
margin-top: 20px;
display: inline-block;
}
}
&:hover {
transform: scale(1.1);
}
}
.swiper-slide:nth-child(2n) {
width: 40%;
}
.swiper-slide:nth-child(3n) {
width: 20%;
}
}
.prev-next {
transition: opacity .3s;
opacity: 0;
.prev,.next {
background: #a2a2a2;
position: absolute;
top: 150px;
&:hover {
background: rgba(31,45,61,.23);
}
}
}
.show {
opacity: 1 !important;
}
}
</style>2. swiper原生使用
这里我们使用的是s3，地址如下： https://3.swiper.com.cn/
npm:
npm install swiper@3.4.2 --savepackage.json：
"swiper": "^3.4.2",使用方法
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css' mounted() {
const galleryTop = new Swiper('.gallery-top', {
loop: true,
loopedSlides: 5,
slidesPerView: 'auto',
spaceBetween: 10,
watchSlidesVisibility: true,//防止不可点击
prevButton: '.swiper-button-thumbs-prev',
nextButton: '.swiper-button-thumbs-next',
});
const galleryThumbs = new Swiper('.gallery-thumbs', {
centeredSlides: true,
touchRatio: 0.2,
loop: true,
loopedSlides: 5,
slidesPerView: 'auto',
spaceBetween: 10,
watchSlidesVisibility: true,//防止不可点击
slideToClickedSlide: true
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
},