在使用vue.js开发时,使用官方vue-cli开发时用上了轮播插件swiper,总结了一下swiper使用时遇到的问题:
最好的老师来自于官方文档:附上vue-awesome-swiper在git上的地址以及安装过程
https://www.npmjs.com/package/vue-awesome-swiper
下面我来概述一下整体使用操作:
一 首先讲下安装:
通过npm安装: npm install vue-awesome-swiper –save
二 在vue项目中找到main.js添加:
import ‘swiper/dist/css/swiper.css’
//(如果使用的是2.6.0以上的版本需要自己手动去加载css)
import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)
三 运用到组件中,出问题最多的地方:
<template>
<div class="scroll">
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination " slot="pagination"></div>
<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-black" slot="button-next"></div>
<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'HelloWorld',
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
notNextTick: true,
//循环
loop:true,
//设定初始化时slide的索引
initialSlide:0,
//自动播放
autoplay:true,
// autoplay: {
// delay: 3000,
// stopOnLastSlide: false,
// disableOnInteraction: true,
// },
// 设置轮播
effect : 'flip',
//滑动速度
speed:800,
//滑动方向
direction : 'horizontal',
//小手掌抓取滑动
// grabCursor : true,
//滑动之后回调函数
on: {
slideChangeTransitionEnd: function(){
// console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide
},
},
//左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable :true
}
},
swiperSlides: [1, 2, 3, 4]
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted () {
//可以使用swiper这个对象去使用swiper官网中的那些方法
console.log('this is current swiper instance object', this.swiper);
// this.swiper.slideTo(0, 0, false);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.swiper-slide{
height:200px;
}
</style>
1 分页器点击小圆点跳转到对应页面不能与设置抓手grabCursor : true同时设置
2 vue-awesome-swiper基于组件的开发设置分页器和上一页下一页按钮,采取下列方式定义:
//左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable :true
}
3 自动轮播autoplay:true与swiper中方法slideTo(0, 0, false)不能同时设置,自动轮播会失效
具体的swiper设置属性可以查看中文API文档:http://www.swiper.com.cn/api