VUE如何快速做一個輪播圖
溫馨提示==>>大家先看這個,再來理解下面的
實現以及優化的思路
- 引入輪播圖組件,嵌套兩層 swiper 和 swiper-slider,然後寫裏面就可以套圖片和文字實現輪播圖效果
- 但是數據(文字以及圖片信息)放在template是很不好的,難維護不方便更新。因此我們要弄一個類似json數據的東西寫在data裏面
- 當圖標容量超過了單頁面容量時候,就會溢出,所以要用特定的computed prop去把溢出內容放入下一頁面層級
具體操作
1. 套入swiper和swiper-list
2. data寫入類似json形式的鍵值對數據
3. 處理鍵值對的對應關係
4. 處理圖標溢出,實現過頁
5. 樣式的處理問題我就不贅訴了,太難了,用Google瀏覽器去調試比較容易
最終效果是