1.下载插件
npm install vue-awesome-swiper --save
2.应用main.js
import VAS from 'vue-awesome-swiper'
import 'vue-awesome-swiper.min.css'
3.遇到的坑
! css和代码分离,要引入 ‘vue-awesome-swiper.min.css’
! 配置时 autoplay:3000打死出不来,改成了autoplay:true
!分页器和前进后退按钮无效
4.具体代码
<template> <div id="home"> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban1.jpg" alt="" ></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban2.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban3.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban4.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban5.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban6.jpg" alt=""></swiper-slide> <!-- Optional controls --> <div slot="pagination"></div> <div slot="button-prev"></div> <div slot="button-next"></div> <div slot="scrollbar"></div> </swiper> </div> </template>
//新版本配置 <script> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { name: 'Home', data(){ return { swiperOption: {//配置轮播,可以去swiper官网看api,链接http://www.swiper.com.cn/api/ notNextTick: true, // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true autoplay: true,
//autoplay:{disableOnInteraction},//用户操作后继续动画 loop: true, direction: 'horizontal', //水平滑动 ‘vertival’ 垂直方向 grabCursor: true, setWrapperSize: true, autoHeight: true, pagination: { el: '.swiper-pagination' }, centeredSlides: true, paginationClickable: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, keyboard: true, mousewheelControl: true, observeParents: true, // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger debugger: true } } }, components:{ swiper, swiperSlide }, computed:{ swiper(){ //实例化swiper return this.$refs.mySwiper.swiper } } } </script>
//低版本配置
<script>
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>
<template> <div id="home"> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban1.jpg" alt="" ></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban2.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban3.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban4.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban5.jpg" alt=""></swiper-slide> <swiper-slide><img src="http://t.zoukankan.com/assets/image/ban6.jpg" alt=""></swiper-slide> <!-- Optional controls --> <div slot="pagination"></div> <div slot="button-prev"></div> <div slot="button-next"></div> <div slot="scrollbar"></div> </swiper> </div> </template> <script>import { swiper, swiperSlide } from 'vue-awesome-swiper'export default{ name: 'Home', data(){ return{ swiperOption: {//以下配置不懂的,可以去swiper官网看api,链接http://www.swiper.com.cn/api/ //notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,<br> 假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true//notNextTick: true,//// swiper configs 所有的配置同swiper官方api配置//speed: 400,//autoplay: true,//loop:true,//direction: 'horizontal',//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//debugger: true, notNextTick: true, //notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true autoplay: true, loop: true, direction: 'horizontal', grabCursor: true, setWrapperSize: true, autoHeight: true, pagination: { el: '.swiper-pagination'}, centeredSlides: true, paginationClickable: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}, keyboard: true, mousewheelControl: true, observeParents: true, //如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger debugger: true} } }, components:{ swiper, swiperSlide }, computed:{ swiper(){ return this.$refs.mySwiper.swiper } } } </script> <!--<style> @import '../swiper.min.css'; </style>-->