vue項目全局引入vue-awesome-swiper插件作出輪播效果

在安裝了vue的前提下，打開命令行窗口，輸入vue init webpack swiper-test，建立一個vue項目且名爲swiper-test（建立速度可能會有點慢，耐心等），博文講完後，源碼託管在GitHub中，供下載並理解。

vue項目自動生成完畢後，繼續在命令行窗口輸入cd swiper-test，將目錄切換到swiper-test。

下面就開始啓動vue項目了，輸入啓動命令行：npm run dev。

 

打開瀏覽器輸入網址：localhost:8080

 

環境搭好了，進入主題，要想引入vue-awsome-swiper插件，還得下載vue-awesome-swiper模塊包，我是經過npm來下載的，雖然很慢，但我有耐心。在swiper-test目錄下打開命令行窗口，輸入npm install vue-awesome-swiper --save。若正常的話，node_modules文件夾中就有vue-awesome-swiper文件夾以及相關文件生成。

我用開發工具Hbuilder打開swiper-test項目，找到目錄src/main.js，開始編輯代碼，引入vue-awesome-swiper模塊：

import VueAwesomeSwiper from "vue-awesome-swiper";

　　

使用模塊：

Vue.use(VueAwesomeSwiper);

　　

圖下：

 

引入告終構，沒有樣式怎麼行，因此，找到目錄src/App.vue，開始編輯，在<script>標籤裏添加這麼一行：

import "swiper/dist/css/swiper.css";　　

 圖下：

app.Vue文件中，爲了預覽效果，把第三行的代碼註釋掉，<img src="./assets/logo.png">通常按ctrl+/就能夠註釋

在目錄src/components下建立swiper.Vue文件，編輯此文件，能夠直接使用swiper組件：<swiper></swiper>

關於swiperOption的配置問題，能夠去swiper官網瞭解：https://www.swiper.com.cn/api/，在這裏，介紹的比誰都牛逼！

swiper.vue內容以下：

<template>
	<div class="swiper-plugs">
		<swiper :options="swiperOption" refs="lwSwiper">
			<swiper-slide>
				<img src="../assets/logo.png" alt="" />
				
			</swiper-slide>
			
			<swiper-slide>
				<img src="../assets/logo.png" alt="" />
				
			</swiper-slide>
			
			<swiper-slide>
				<img src="../assets/logo.png" alt="" />
				
			</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>
			<!--滾動條-->
			<div class="swiper-scrollbar" slot="scrollbar"></div>
			
		</swiper>
	</div>
</template>

<script>
	
	export default{
		data(){
			return {
				swiperOption: {
			         autoplay : {
				      disableOnInteraction: false, //用戶操做後是否禁止自動循環
				      delay: 1000 //自動循環時間
				     }, //可選選項，自動滑動
				     speed: 1000, //切換速度，即slider自動滑動開始到結束的時間（單位ms）
				     loop:false, //循環切換
				     grabCursor: false, //設置爲true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
				     // setWrapperSize: true, //Swiper使用flexbox佈局(display: flex)，開啓這個設定會在Wrapper上添加等於slides相加的寬或高，在對flexbox佈局的支持不是很好的瀏覽器中可能須要用到。
				     autoHeight: true,   //自動高度。設置爲true時，wrapper和container會隨着當前slide的高度而發生變化。   
				     scrollbar: '.swiper-scrollbar',//顯示滾動條
				     mousewheelControl: true, //設置爲true時，能使用鼠標滾輪控制slide滑動
				     observeParents: false, //當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper
				 
				     pagination: {
				      el: '.swiper-pagination',
				      // type : 'progressbar', //分頁器形狀
				      clickable :true, //點擊分頁器的指示點分頁器會控制Swiper切換
				     },
				     navigation: {
				      nextEl: '.swiper-button-next',
				      prevEl: '.swiper-button-prev',
				     },       
				   }
			}
		}
	}
</script>

<style>
</style>　

想預覽效果啥辦？那就得給一個路由規則了，打開目錄src/router/index.js，往routes數組添加一組路由規則。

index.js修改後的內容：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import swiper from '@/components/swiper'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    	path:'/swiper',
    	name:'swiper',
    	component:swiper
    }
  ]
})

 打開瀏覽器，網址輸入：http://localhost:8080/#/swiper

到這，就基本上有輪播效果了，可是，有個要注意的是，圖片每次輪播都調用調用事件，致使頁面性能低，因此，就給了一個計算屬性，大大簡化了運算。

swiper.vue最終的修改：<template>

	<div class="swiper-plugs">
		<swiper :options="swiperOption" refs="lwSwiper">
			<swiper-slide>
				<img src="../assets/logo.png" alt="" />
				
			</swiper-slide>
			
			<swiper-slide>
				<img src="../assets/logo.png" alt="" />
				
			</swiper-slide>
			
			<swiper-slide>
				<img src="../assets/logo.png" alt="" />
				
			</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>
			<!--滾動條-->
			<div class="swiper-scrollbar" slot="scrollbar"></div>
			
		</swiper>
	</div>
</template>

<script>
	
	export default{
		data(){
			return {
             
				swiperOption: {
			         autoplay : {
				      disableOnInteraction: false, //用戶操做後是否禁止自動循環
				      delay: 1000 //自動循環時間
				     }, //可選選項，自動滑動
				     speed: 1000, //切換速度，即slider自動滑動開始到結束的時間（單位ms）
				     loop:false, //循環切換
				     grabCursor: false, //設置爲true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
				     // setWrapperSize: true, //Swiper使用flexbox佈局(display: flex)，開啓這個設定會在Wrapper上添加等於slides相加的寬或高，在對flexbox佈局的支持不是很好的瀏覽器中可能須要用到。
				     autoHeight: true,   //自動高度。設置爲true時，wrapper和container會隨着當前slide的高度而發生變化。   
				     scrollbar: '.swiper-scrollbar',//顯示滾動條
				     mousewheelControl: true, //設置爲true時，能使用鼠標滾輪控制slide滑動
				     observeParents: false, //當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper
				 
				     pagination: {
				      el: '.swiper-pagination',
				      // type : 'progressbar', //分頁器形狀
				      clickable :true, //點擊分頁器的指示點分頁器會控制Swiper切換
				     },
				     navigation: {
				      nextEl: '.swiper-button-next',
				      prevEl: '.swiper-button-prev',
				     },       
				   }
			}
		},
		computed:{
			swiper(){
				return this.$refs.lwSwiper.swiper;
			}
		}
	}
</script>

<style>
</style>

還有注意的是，在控制檯中，莫名其妙出現大量警告信息。找到目錄build/webpack.base.conf.js，把43行註釋掉：...(config.dev.useEslint ? [createLintingRule()] : []),保存文件，退出當前運行環境，從新輸入啓動命令行：npm run dev

github源碼網址：https://github.com/murenziwei/swipertest