vue中swiper vue-awesome-swiper的使用方法及各种坑解决
作者：@是静静啊
这篇文章主要介绍了vue中swiper vue-awesome-swiper的使用方法及各种坑解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
一、什么是vue-awesome-swiper？
简而言之：
vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。
vue-awesome-swiper的使用
1、安装
npm install vue-awesome-swiper --save-dev
2.引用
/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式，以及具体位置。
Vue.use(VueAwesomeSwiper, /* { default global options } */)
/*组件方式引用*/
import 'swiper/dist/css/swiper.css'这里注意具体看使用的版本是否需要引入样式，以及具体位置。
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}3.使用
就是一般组件的用法
<swiper :options="swiperOption">
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
<div class="swiper-pagination"></div> //标页码
data(){
return{
swiperOption: {//swiper3
autoplay: 3000,
speed: 1000,
}
}
}二、由版本引起的一系列坑
坑1
按照上图安装方法，npm将安装最新的vue-awesome-swiper（@4），对应的是swiper6，但是国内暂时没有swiper6的文档，意味着没法参考使用方法，有问题也不好去网上找
坑2
最新版vue-awesome-swiper的安装姿势是这样子滴：
npm install swiper vue-awesome-swiper --save
对比vue-awesome-swiper版本3
npm install vue-awesome-swiper --save-dev
坑3
这是网上大伙查找的最多的坑，搞了很久没解决，有可能会导致小伙伴们暴躁易怒，哈哈
安装完之后，你又在某度上查找使用方法，网友一般建议你这样使用
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
};
},然后你的vue就使劲跟你报错，说找不到swiper.css，然后你又继续某度，无限坑。。。
或者你去看了一下路径，再去node_modules找swiper，发现没有swiper这货。那就安装个swiper呗
npm install swiper --save
但是，你没有带版本，npm默认给你装的是swiper6，文件夹里的路径跟swiper4都不一样啦兄弟们。
这才是问题的根源，加入你没找到问题的核心，继续某度的话，估计还没好几天辛苦滴爬坑。
正确的使用姿势：
安装（指定版本）
npm install vue-awesome-swiper@3 --save-dev
组件中使用
这里我贴出在页面中简单使用方法（先跑起来），小伙伴们可以完全复制粘贴，复杂的东西我都简化掉了。 版本: vue@2.5.2，vue-awesome-swiper@3.1.3
<template>
<div class="recommendPage">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</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>
</template>
<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log("this is current swiper instance object", this.swiper);
// this.swiper.slideTo(3, 1000, false);
}
};
</script>
<style scoped >
.recommendPage .swiper-container{
position: relative;
width: 100%;
height: 200px;
background: pink;
}
.recommendPage .swiper-container .swiper-slide{
width: 100%;
line-height: 200px;
background: yellowgreen;
color: #000;
font-size: 16px;
text-align: center;
}
</style>三、例子
我写的是局部的,只需要在 在ha.vue页面 写好如下结构
<template> <div class=''> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="item in slide" :key="item.imgUrl"> <img :src="item.imgUrl" alt="" class="swiper-slide-img" width="100%" height="100%" /></swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template>
在script引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log("this is current swiper instance object", this.swiper);
// this.swiper.slideTo(3, 1000, false);
}
};
</script>
<style scoped >
</style>还有一些关于版本的坑，反正真的很坑，不然我不会大半夜气呼呼在这写这玩意
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。