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" />
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" />
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" />
</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" />
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" />
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" />
</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
vue項目全局引入vue-awesome-swiper插件做出輪播效果