一.簡介
Swiper常用于移動端網站的內容觸摸滑動
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端，以及PC端網站。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
下載安裝
打開 surmon-china/vue-awesome-swiper，參考安裝使用教程。
1. 選用npm下載安裝
項目目錄
win7下，cmd終端，進入根目錄，
cnpm install vue-awesome-swiper@2.6.7 --save
我的網速慢，使用
cnpm代替npm，@2.6.7表示安裝的版本，--save本地測試還是項目上線，都會用到vue-awesome-swiper@2.6.7
安裝完成后，在項目的node_modules目錄下會找到
2.使用
全局掛載：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
組件掛載
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
由于我們要在很多地方用到該插件，選用全局方式，把上述全局代碼復制到src/main.js中
2.SPA在單頁面開發中的應用
新建一個.vue文件，按照以下代碼模式更改
<!-- The ref attr used to find the swiper instance -->
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- 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>
<!-- Optional controls -->
<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>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的參數同 swiper 官方 api 參數
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用當前上下文內的swiper對象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
例如：
<template>
<div class="wrapper">
<swiper :options="swiperOption" class="swiper-container" >
<!-- slides -->
<swiper-slide class="swiper-item" v-for='item of swiperList' :key='item.id'>
<img class='swiper-img' :src='item.imgUrl' alt="去哪兒門票" />
</swiper-slide>
<!-- Optional controls ,顯示小點-->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name:'HomeSwiper',
//es6的寫法，相當于data:function(){return{swiperOption:{}}}
data(){
return{
swiperOption:{
// 參數選項,顯示小點
pagination:'.swiper-pagination',
//循環
loop:true,
//每張播放時長3秒，自動播放
autoplay:2000,
//滑動速度
speed:1000,
// delay:1000
},
//三張輪播，使用變量循環
swiperList:[
{
id:'001',
imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg"
},
{
id:'002',
imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
},
{
id:'003',
imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg"
}
]
}
},
}
</script>
<style lang='stylus' scoped>
// >>>穿透作用，因為swiper-pagination-bullet-active類在組件內部定義的，想要wrapper也能作用到，可以用>>>
.wrapper >>>.swiper-pagination-bullet-active
background #fff !important
.wrapper
overflow:hidden
width 100%
height:0
padding-bottom:26.6666667%
background :#ccc
.swiper-item
width:100%
.swiper-img
width:100%
</style>
