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

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

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

今天將完成Vue項(xiàng)目去哪兒網(wǎng)App首頁輪播圖，下面是在本次慕課網(wǎng)完成Vue項(xiàng)目去哪兒網(wǎng)App首頁輪播圖的總結(jié)和感受。

熟悉的圖片輪播，只要是個(gè)網(wǎng)站，百分之90以上會有個(gè)圖片輪播。

文章目錄

• 創(chuàng)建分支
• 安裝Swiper
• 在Home.vue導(dǎo)入Swiper組件
• Swiper.vue
• 遇到Bug

學(xué)習(xí)前，先把官方文檔列出來：https://www.swiper.com.cn/

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

創(chuàng)建分支

在碼云項(xiàng)目中，創(chuàng)建一個(gè)新的分支。

然后通過git pull和git checkout index-swipper進(jìn)行輪播圖功能的開發(fā)。

安裝Swiper

swiper是一個(gè)相當(dāng)強(qiáng)大的圖片展示插件，下面我來介紹一下swiper的簡單圖片輪播功能。

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

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

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

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

在Home.vue導(dǎo)入Swiper組件

Swiper.vue

<template> <!-- 在swiper外面定義一個(gè)div是為了解決網(wǎng)速慢得抖動的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，設(shè)置才出現(xiàn)小圓點(diǎn)pagination: '.swiper-pagination',// 定義loop表示可以循環(huán)輸出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

報(bào)錯(cuò)：expected “indent”, got “eos”

在寫vue項(xiàng)目時(shí)stylus代碼報(bào)錯(cuò)，這樣的錯(cuò)誤是因?yàn)榛煊每崭窈蛅ab鍵造成的。

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

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

這是因?yàn)檠b有了插件的原因。因此無需關(guān)注。

參考課程：慕課網(wǎng)Vue2.5->2.6->3.0 開發(fā)去哪兒網(wǎng)App 從零基礎(chǔ)入門到實(shí)戰(zhàn)項(xiàng)目開發(fā)

請一鍵三連！！！！！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。