Vue vue-awesome-swiper使用
1.Vue搭建项目需要用到轮播图,就去查了一下Vue的插件vue-awesome-swiper,看似简单实则深藏不露各种问题层数不穷,记录一下方便诸位和自己安装vue-awesome-swiper依赖,导入文件npm install swiper vue-awesome-swiper --save//components单独引入,只有个别地方需要,这里不做全局引入<div v-swiper:
·
1.Vue搭建项目需要用到轮播图,就去查了一下Vue的插件vue-awesome-swiper,看似简单实则深藏不露各种问题层数不穷,记录一下方便诸位和自己
安装vue-awesome-swiper依赖,导入文件
npm install swiper vue-awesome-swiper --save
//components单独引入,只有个别地方需要,这里不做全局引入
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" :key="banner" v-for="banner in banners">
<img :src="banner">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
这里需要注意,版本和css文件位置的问题,首先我这里安装没有限制版本,默认最新版的,对应的css文件引入路径也是不一样的,github有给出提示
接下来就是一些配置根据官网的配置
可能出现 Cannot read property 'slideTo' of undefined 的错误信息,首先就要去看 slideTo 方法存不存在
swiper() {
return this.$refs.mySwiper.swiper
}
但是我这个修改以后发现swiper下还是没有slideTo方法,彻底恶心坏了,有兴趣的自己可以打印看一看,我这里就不做处理了,由于项目紧没有做后续处理,直接走swiper的配置,通过配置来实现轮播图的滚动效果,swiper官网给出的配置
看不懂的可以参看这个博主的配置说明,在最下面 https://blog.csdn.net/dwb123456123456/article/details/82701740
<template>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in banners" :key="item">
<img style="width:100%;height:200px" :src="item" alt="">
</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>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
// 引入轮播图组件
export default {
components:{
swiper,
swiperSlide
},
data() {
return {
banners: [ 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3721559046,4127241541&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2492633268,262337583&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3264192244,2788830312&fm=26&gp=0.jpg'
],
swiperOption: {
loop :true,
autoplay: {
//这个参数很重要,当外力干扰轮播图时,它能够继续实现自我滚动
disableOnInteraction: false,
delay: 1000,//5秒切换一次
},
loopAdditionalSlides : 3,
pagination : {
el:'.swiper-pagination',
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}
}
}
</script>
更多推荐
所有评论(0)