siwper vue 上下滑动分页_基于vue-cli的VueAwesomeSwiper轮播滑块插件的使用及常见问题...

基于之前写的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中，我们可以这么写

// 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,

}

}

},

}

注意！！！！

这其中的autoplay和pagination和prevButton和nextButton等属性，在低版本中是允许这么使用的，并且可以功能正常生效，但是再高版本swiper中这样写不会生效，并且vue不会报错。如果有报错的同志们可以试一下swiper4版本的写法，如下所示：

4.基于swiper4组件配置(HelloWorld.vue文件或其他 .vue文件)

I'm Slide 1

I'm Slide 2

I'm Slide 3

I'm Slide 4

I'm Slide 5

I'm Slide 6

I'm Slide 7

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 += ``

}

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)

}

}

.swiper-container{

height:200px;

overflow: hidden;

margin-top:88px;/*px*/

}

.swiper-wrapper{

height:200px;

}

.swiper-slide{

height:200px;

float: left;

background:red;

}