原文链接：https://www.cnblogs.com/nanjie/p/8556287.html
基于之前写的vue2.0 + vue-cli + webpack 搭建项目（ vue-awesome-swiper版本：3.1.3 ，如果成功后没报错，但不显示分页样式，可能版本对不上）
1.进入项目目录，安装swiper
npm install vue-awesome-swiper --save
2.引入资源（main.js文件)
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
3.很多人在引入swiper的时候会出现小点swiper-pagination出不来或者一些配置属性没有生效。原因是现在最新的swiper版本已经开始区分组件和普通版本了。
在低版本swiper中，我们可以这么写
<script>
// swiper options example:
export default {
name: 'carrousel',
data() {
return {
swiperOption:
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000,
direction: 'vertical',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: '.swiper-pagination',
paginationClickable: true,
prevButton: '.swiper-button-prev',//上一张
nextButton: '.swiper-button-next',//下一张
scrollbar: '.swiper-scrollbar',//滚动条
mousewheelControl: true,
observeParents: true,
debugger: true,
}
}
},
}
</script>
注意！！！！
这其中的autoplay和pagination和prevButton和nextButton等属性，在低版本中是允许这么使用的，并且可以功能正常生效，但是再高版本swiper中这样写不会生效，并且vue不会报错。如果有报错的同志们可以试一下swiper4版本的写法，如下所示：
4.基于swiper4组件配置(HelloWorld.vue文件或其他 .vue文件)
<template>
<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>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</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'
require('swiper/dist/css/swiper.css')
export default {
name: 'carrousel',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
notNextTick: true,
//循环
loop:true,
//设定初始化时slide的索引
initialSlide:0,
//自动播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
//滑动速度
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,
type: 'custom',
//自定义分页器样式
renderCustom: function (swiper, current, total) {
const activeColor = '#168fed'
const normalColor = '#aeaeae'
let color = ''
let paginationStyle = ''
let html = ''
for (let i = 1; i <= total; i++) {
if (i === current) {
color = activeColor
} else {
color = normalColor
}
paginationStyle = `background:${color};opacity:1;margin-right:20px;width:20px;height:20px;transform:skew(15deg);border-radius:0;`
html += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`
}
return html
}
}
}
}
},
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
// console.log('this is current swiper instance object', this.swiper)
// this.swiper.slideTo(3, 1000, false)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.swiper-container{
height:200px;
overflow: hidden;
margin-top:88px;/*px*/
}
.swiper-wrapper{
height:200px;
}
.swiper-slide{
height:200px;
float: left;
background:red;
}
</style>
网友评论