vue中swipervue-awesome-swiper的使用方法及各种坑解决
短信预约 -IT技能 免费直播动态提醒
一、什么是vue-awesome-swiper？
简而言之：
vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。
vue-awesome-swiper的使用
1、安装
npm install vue-awesome-swiper --save-dev2.引用
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式，以及具体位置。
Vue.use(VueAwesomeSwiper, )
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 class="lazy" data-src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img class="lazy" data-src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img class="lazy" data-src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img class="lazy" data-src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img class="lazy" data-src="static/images/jay.jpg"></swiper-slide>
<swiper-slide><img class="lazy" data-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 :class="lazy" data-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>还有一些关于版本的坑，反正真的很坑，不然我不会大半夜气呼呼在这写这玩意
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
