項(xiàng)目中引入了vant組件庫(kù)，直接使用van-swipe即可仰泻。
GitHub：https://github.com/Ewall1106/mall
基本介紹
- vue-awesome-swiper是一個(gè)輪播圖開(kāi)源組件武翎，官網(wǎng)從安裝到使用都介紹的很詳細(xì)了纤掸，大家可以去看看琴许。
- 我們從官網(wǎng)選取一種輪播圖效果作為我們項(xiàng)目的輪播圖趣钱，就這個(gè)了：
swiper
安裝
- 用npm命令行中輸入安裝vue-awesome-swiper依賴：
$ npm install vue-awesome-swiper --save
npm
- 然后我們?nèi)ackage.json中看看是否存在
package.jcon
使用
- 官網(wǎng)上提供了多種使用方式，我們要在vue項(xiàng)目中要用到的主要是選全部引入還是組件中引入星岗，這里我們選第二種：
- 我們按照它的來(lái)在項(xiàng)目中引入：
carousel.vue中引入
- html的結(jié)構(gòu)也按照它提供的來(lái)復(fù)制粘貼一下到
carousel.vue中：
github
- 我們的
template結(jié)構(gòu)把右箭頭填大、左箭頭什么的注釋掉
carousel的html結(jié)構(gòu)
- 添加分頁(yè)參數(shù)和自動(dòng)輪播兩個(gè)參數(shù)，具體參數(shù)注釋上也上說(shuō)的很清楚了俏橘，跟swiper官方api參數(shù)一樣允华。
js
-
然后我們?nèi)ゾW(wǎng)上找?guī)讖垐D，寫(xiě)個(gè)img：
添加img 給img設(shè)置一下寬度寥掐，最后顯示的效果就是這樣：
效果
深度處理器
- 我們看到這里的焦點(diǎn)會(huì)有一個(gè)默認(rèn)的顏色靴寂，改變這個(gè)焦點(diǎn)顏色也有一個(gè)小坑。
問(wèn)題所在
-
如何解決召耘？這里我們要用到
vue的深度作用選擇器百炬。
vue官網(wǎng) 用開(kāi)發(fā)者工具找到這個(gè)點(diǎn)的
class類(lèi)名：
tools
- 使用深度選擇器把這個(gè)點(diǎn)變?yōu)榘咨＃╨ess里面不能用
>>>這種寫(xiě)法）
深度選擇器
- 最后的瀏覽器的效果就是這樣了：
最終輪播圖效果
