2020/10/23、 周五、今天又是奮斗的一天。

@Author：Runsen
@Date：2020/10/22

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天將完成Vue項目去哪兒網App首頁輪播圖，下面是在本次慕課網完成Vue項目去哪兒網App首頁輪播圖的總結和感受。

熟悉的圖片輪播，只要是個網站，百分之90以上會有個圖片輪播。

文章目錄

• 創建分支
• 安裝Swiper
• 在Home.vue導入Swiper組件
• Swiper.vue
• 遇到Bug

學習前，先把官方文檔列出來：https://www.swiper.com.cn/

對于的Github文檔：https://github.com/surmon-china/vue-awesome-swiper

創建分支

在碼云項目中，創建一個新的分支。

然后通過git pull和git checkout index-swipper進行輪播圖功能的開發。

安裝Swiper

swiper是一個相當強大的圖片展示插件，下面我來介紹一下swiper的簡單圖片輪播功能。

Swiper提供了比較舊的版本，這里選用2.6.7

npm install swiper vue-awesome-swiper@2.6.7 --save

安裝成功后，在main.js引入swiper。

注意引用的CSS的路徑，官網是最新的版本，而我們這里使用的是2.6.4

在Home.vue導入Swiper組件

Swiper.vue

<template> <!-- 在swiper外面定義一個div是為了解決網速慢得抖動的BUG --><div class="wrapper"><swiper :options="swiperOption"><!-- vue的列表渲染，key --><swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" :src="item.imgUrl" /></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div> </template><script> export default {name: 'HomeSwiper',// ES6data后面要有空格data () {return {swiperOption: {// pagination屬性的指是class為swiper-pagination，設置才出現小圓點pagination: '.swiper-pagination',// 定義loop表示可以循環輸出loop: true},swiperList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1802/e3/62ce7362ca051d02.jpg_640x200_6db551b7.jpg'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1801/93/ce59d182aca07102.jpg_640x200_ba03d44c.jpg'}]}} } </script> <style lang="stylus" scoped>.wrapper >>> .swiper-pagination-bullet-activebackground: #fff.wrapperoverflow: hiddenwidth: 100%height: 0padding-bottom: 31.25%background: #eee.swiper-imgwidth: 100% </style>

遇到Bug

報錯：expected “indent”, got “eos”

在寫vue項目時stylus代碼報錯，這樣的錯誤是因為混用空格和tab鍵造成的。

解決方案: 直接格式化代碼

Unchecked runtime.lastError: The message port closed before a response was

這是因為裝有了插件的原因。因此無需關注。

參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發

請一鍵三連！！！！！

總結

以上是生活随笔為你收集整理的六十六、实现Vue项目首页轮播图（vue-awesome-swiper）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。