4. vue使用vue-awesome-swiper實現輪播 · vue.js

[TOC] [vue-awesome-swiper官網]([https://surmon-china.github.io/vue-awesome-swiper/](https://surmon-china.github.io/vue-awesome-swiper/)) # 教程 ## 一、先說一個看關于vue-awesome-swiper的一個坑 ???????vue項目的package.json中顯示的**"vue-awesome-swiper": "^2.5.4"**，用**npm install**自動安裝依賴時裝的版本為**"version": "2.6.7"** ???????2.5.4與2.6.7都是基于swiper3的，從官網上swiper3的教程來看并不需要單獨引入樣式文件，而2.6.7版本需要單獨引入swiper/dist/css目錄下的swiper.css樣式文件（類似于swiper4）。 ???????并且2.6.7版本swiper位于**node\_modules/vue-awesome-swiper/node\_modules**下；2.5.4不需要單獨引入樣式文件，并且swiper直接位于**node\_modules**文件夾下。 ## 二、基本使用方法 ### 1.安裝（"vue-awesome-swiper": "^3.1.3",） ~~~ 1、先安裝less-loader npm install less less-loader --save 2、再安裝css-loader npm install css-loader --save 3、安裝上面兩個之后、再安裝vue-awesome-swiper（必須在前兩個安裝過之后安裝） npm install vue-awesome-swiper --save 4、安裝完之后在package.json文件中查看一下，看是否安裝上，如果安裝成功，里面會顯示對應的版本號 "less": "^3.8.1", "less-loader": "^4.1.0", "css-loader": "^0.28.11", "vue-awesome-swiper": "^3.1.3", 5、在main.js中引入 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 6、修改build\\webpack.base.conf.js文件，添加下面代碼 ? { ? ? ? ? test: /\\.less$/, ? ? ? ? loader: 'style-loader!css-loader!less-loader' ? } 7、之后就可以編寫輪播組件什么的。。。送佛送到西，（輪播）組件附上： <template> <div class="swiperBox"> <swiper :options="swiperOption" ref="mySwiper">  <swiper-slide><div class="page">1</div></swiper-slide> <swiper-slide><div class="page">2</div></swiper-slide> <swiper-slide><div class="page">3</div></swiper-slide> <swiper-slide><div class="page">4</div></swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> 　　import { swiper,swiperSlide } from 'vue-awesome-swiper' 　　export default{ 　　　　components:{ 　　　　　　swiper, 　　　　　　swiperSlide 　　　　}, 　　　　data(){ 　　　　　　return { 　　　　　　　　swiperOption:{ 　　　　　　　　notNextTick:true, 　　　　　　　　pagination:{ 　　　　　　　　　　el:'.swiper-pagination' 　　　　　　　　}, 　　　　　　　　loop:true, 　　　　　　　　disableOnInteraction:true, 　　　　　　　　autoplay:2000, 　　　　　　　　slidesPerView:'auto', 　　　　　　　　centeredSlides:true, 　　　　　　　　paginationClickable:true, 　　　　　　　　spaceBetween:30, 　　　　　　　　onSlideChangeEnd:swiper => { 　　　　　　　　　　//這個位置放置swiper的回調方法　　　　　　　　　　this.page = swiper.realIndex+1; 　　　　　　　　　　this.index = swiper.realIndex; 　　　　　　　　} 　　　　　　} 　　　　} 　　}, 　　computed:{ 　　　　//定義這個swiper對象　　　　swiper(){ 　　　　　　return this.$refs.mySwiper.swiper; 　　　　} 　　}, 　　mounted() { 　　　　//這邊就可以使用swiper這個對象或使用swiper官網中的方法　　　　var that=this; 　　　　this.swiper.slideTo(0,0,false); 　　　　//自動播放　　　　setInterval(function(){ 　　　　　　that.swiper.slideNext() 　　　　},2000) 　　}, } </script> <style scoped> 　　.swiperBox{ 　　　　width:100%; 　　　　height:300px; 　　} 　　.page{ 　　　　width:100%; 　　　　height:300px; 　　　　background:pink; 　　} </style> ~~~ ### 2.引用 ~~~ /*全局引入*/ import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css'//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。 Vue.use(VueAwesomeSwiper, /* { default global options } */) ~~~ ~~~ /*組件方式引用*/ import 'swiper/dist/css/swiper.css'////這里注意具體看使用的版本是否需要引入樣式，以及具體位置。 import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } ~~~ ### 3.使用就是一般組件的用法 ~~~ <swiper :options="swiperOption"> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> </swiper>  <div class="swiper-scrollbar"></div> //滾動條 <div class="swiper-button-next"></div> //下一項 <div class="swiper-button-prev"></div> //上一項 <div class="swiper-pagination"></div> //標頁碼 ~~~ ~~~ data(){ return{ swiperOption: {//swiper3 autoplay: 3000, speed: 1000, } } } ~~~ ## 三、配置 | 參數 | 類型（swiper3） | 默認值（swiper3） | 類型（swiper4） | 默認值（swiper4） | 說明 | | --- | --- | --- | --- | --- | --- | | autoplay | Number/Boolean | 0/false | Object | [autoplay](https://segmentfault.com/a/1190000014609379#autoplay) | 自動切換 | | speed | Number | 300 | Number | 300 | 切換速度 | | loop | Boolean | false | Boolean | false | loop模式 | | loopAdditionalSlides | Number | 0 | Number | 0 | loop模式下會在slides前后復制若干個slide,，前后復制的個數不會大于原總個數。 | | loopedSlides | Number | 1 | Number | 1 | 在loop模式下使用slidesPerview:'auto',還需使用該參數設置所要用到的loop個數。 | | direction | String | horizontal | String | horizontal | Slides的滑動方向 | | autoplayDisableOnInteraction | Boolean | true | \- | \- | 用戶操作swiper之后，是否禁止autoplay | | autoplayStopOnLast | Boolean | true | \- | \- | 切換到最后一個slide時停止自動切換 | | grabCursor | Boolean | false | Boolean | false | 鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀 | | width | Number | \- | Number | \- | 強制Swiper的寬度 | | height | Number | \- | Number | \- | 強制Swiper的高度 | | autoHeight | Boolean | false | Boolean | false | 自動高度 | | **freeMode:** | | | | | **swiper3/4 api相同** | | freeMode | Boolean | false | \- | \- | free模式，slide會根據慣性滑動且不會貼合 | | freeModeMomentum | Boolean | true | \- | \- | free模式動量。若設置為false則關閉動量，釋放slide之后立即停止不會滑動。 | | freeModeMomentumRatio | Number | 1 | \- | \- | free模式動量值（移動慣量） | | freeModeMomentumVelocityRatio | Number | 1 | \- | \- | 動量反彈 | | freeModeMomentumBounce | Boolean | true | \- | \- | Slides的滑動方向 | | freeModeMomentumBounceRatio | Number | 1 | \- | \- | 值越大產生的邊界反彈效果越明顯，反彈距離越大。 | | freeModeSticky | Boolean | false | \- | \- | 使得freeMode也能自動貼合。 | | **effect:** | | | | | **swiper3/4 api相同** | | effect | String | slide | \- | \- | slide的切換效果。 | | fade/fadeEffect(4) | Object | [fade](https://segmentfault.com/a/1190000014609379#fade) | \- | \- | fade效果參數。 | | cube/cubeEffect | Object | [cube](https://segmentfault.com/a/1190000014609379#cube) | \- | \- | cube效果參數。 | | coverflow/coverflowEffect | Object | [coverflow](https://segmentfault.com/a/1190000014609379#coverflow) | \- | \- | coverflow效果參數。 | | flip/flipEffect | Object | [flip](https://segmentfault.com/a/1190000014609379#flip) | \- | \- | flip效果參數。 | | **Zoom:** | | | | | | | zoom | Boolean | false | Object | [zoom](https://segmentfault.com/a/1190000014609379#zoom) | 焦距功能：雙擊slide會放大，并且在手機端可雙指觸摸縮放。 | | zoomMax | Number | 3 | \- | \- | 最大縮放焦距（放大倍率）. | | zoomMin | Number | 1 | \- | \- | 最小縮放焦距（縮小倍率）。 | | zoomToggle | Boolean | true | \- | \- | 設置為false，不允許雙擊縮放，只允許手機端觸摸縮放。 | | **pagination:** | | | | | | | pagination | String | \- | Object | [pagination](https://segmentfault.com/a/1190000014609379#pagination) | 分頁器容器的css選擇器或HTML標簽 | | paginationType | String | \- | \- | \- | bullets’ 圓點（默認）‘fraction’ 分式 ‘progress’ 進度條‘custom’ 自定義 | | paginationClickable | Boolean | false | \- | \- | 點擊分頁器的指示點分頁器控制Swiper切換 | | paginationHide | Boolean | false | \- | \- | 默認分頁器會一直顯示 | | paginationElement | String | span | \- | \- | 設定分頁器指示器（小點）的HTML標簽。 | | **Navigation Buttons:** | | | | [swiper4 navigation](https://segmentfault.com/a/1190000014609379#navigation) | | | nextButton | string / HTMLElement | \- | \- | \- | 前進按鈕的css選擇器或HTML元素。 | | prevtButton | string / HTMLElement | \- | \- | \- | 后退按鈕的css選擇器或HTML元素。 | | **Scrollbar:** | | | | | | | scrollbar | string / HTMLElement | \- | Object | [swiper4 Scrollbar](https://segmentfault.com/a/1190000014609379#Scrollbar) | Scrollbar容器的css選擇器或HTML元素 | | scrollbarHide | Bolean | true | \- | \- | 滾動條是否自動隱藏。 | | scrollbarDraggable | Boolean | false | \- | \- | 該參數設置為true時允許拖動滾動條。 | | scrollbarSnapOnRelease | Boolean | false | \- | \- | 如果設置為true，釋放滾動條時slide自動貼合。 | [**autoplay:**](https://segmentfault.com/a/1190000014609379#REautoplay) ~~~ autoplay: { delay: 3000, //自動切換的時間間隔，單位ms stopOnLastSlide: false, //當切換到最后一個slide時停止自動切換 stopOnLastSlide: true, //如果設置為true，當切換到最后一個slide時停止自動切換。 disableOnInteraction: true, //用戶操作swiper之后，是否禁止autoplay。 reverseDirection: true, //開啟反向自動輪播。 waitForTransition: true, //等待過渡完畢。自動切換會在slide過渡完畢后才開始計時。 }, ~~~ [**fade:**](https://segmentfault.com/a/1190000014609379#REfade) ~~~ fadeEffect: { crossFade: false, } ~~~ [**cube:**](https://segmentfault.com/a/1190000014609379#REcube) ~~~ cubeEffect: { slideShadows: true, //開啟slide陰影。默認 true。 shadow: true, //開啟投影。默認 true。 shadowOffset: 100, //投影距離。默認 20，單位px。 shadowScale: 0.6 //投影縮放比例。默認0.94。 }, ~~~ [**coverflow:**](https://segmentfault.com/a/1190000014609379#REcoverflow) ~~~ coverflowEffect: { rotate: 30, //slide做3d旋轉時Y軸的旋轉角度。默認50。 stretch: 10, //每個slide之間的拉伸值，越大slide靠得越緊。默認0。 depth: 60, //slide的位置深度。值越大z軸距離越遠，看起來越小。默認100。 modifier: 2, //depth和rotate和stretch的倍率，相當于depth*modifier、rotate*modifier、stretch*modifier，值越大這三個參數的效果越明顯。默認1。 slideShadows : true //開啟slide陰影。默認 true。 }, ~~~ [**flip:**](https://segmentfault.com/a/1190000014609379#REflip) ~~~ flipEffect: { slideShadows : true, //slides的陰影。默認true。 limitRotation : true, //限制最大旋轉角度為180度，默認true。 } ~~~ [**zoom:**](https://segmentfault.com/a/1190000014609379#REzoom) ~~~ zoom: { maxRatio: 5, //最大倍數 minRatio: 2, //最小倍數 toggle: false, //不允許雙擊縮放，只允許手機端觸摸縮放。 containerClass: 'my-zoom-container', //zoom container 類名 }, ~~~ [**navigation:**](https://segmentfault.com/a/1190000014609379#REnavigation) ~~~ navigation: { nextEl: '.swiper-button-next', //前進按鈕的css選擇器或HTML元素。 prevEl: '.swiper-button-prev', //后退按鈕的css選擇器或HTML元素。 hideOnClick: true, //點擊slide時顯示/隱藏按鈕 disabledClass: 'my-button-disabled', //前進后退按鈕不可用時的類名。 hiddenClass: 'my-button-hidden', //按鈕隱藏時的Class }, ~~~ [**pagination:**](https://segmentfault.com/a/1190000014609379#REpagination) ~~~ pagination: { el: '.swiper-pagination', type: 'bullets', //type: 'fraction', //type : 'progressbar', //type : 'custom', progressbarOpposite: true, //使進度條分頁器與Swiper的direction參數相反 bulletElement : 'li', //設定分頁器指示器（小點）的HTML標簽。 dynamicBullets: true, //動態分頁器，當你的slide很多時，開啟后，分頁器小點的數量會部分隱藏。 dynamicMainBullets: 2, //動態分頁器的主指示點的數量 hideOnClick: true, //默認分頁器會一直顯示。這個選項設置為true時點擊Swiper會隱藏/顯示分頁器。 clickable: true, //此參數設置為true時，點擊分頁器的指示點分頁器會控制Swiper切換。 }, ~~~ [**Scrollbar:**](https://segmentfault.com/a/1190000014609379#REScrollbar) ~~~ scrollbar: { el: '.swiper-scrollbar', hide: true, //滾動條是否自動隱藏。默認：false，不會自動隱藏。 draggable: true, //該參數設置為true時允許拖動滾動條。 snapOnRelease: true, //如果設置為false，釋放滾動條時slide不會自動貼合。 dragSize: 30, //設置滾動條指示的尺寸。默認'auto': 自動，或者設置num(px)。 }, ~~~