icon圖標實現輪播效果和頁面切換

VUE如何快速做一個輪播圖

溫馨提示==>>大家先看這個,再來理解下面的

實現以及優化的思路

  • 引入輪播圖組件,嵌套兩層 swiper 和 swiper-slider,然後寫裏面就可以套圖片和文字實現輪播圖效果
  • 但是數據(文字以及圖片信息)放在template是很不好的,難維護不方便更新。因此我們要弄一個類似json數據的東西寫在data裏面
  • 當圖標容量超過了單頁面容量時候,就會溢出,所以要用特定的computed prop去把溢出內容放入下一頁面層級

具體操作

1. 套入swiper和swiper-list

在這裏插入圖片描述

2. data寫入類似json形式的鍵值對數據

在這裏插入圖片描述

3. 處理鍵值對的對應關係

在這裏插入圖片描述
在這裏插入圖片描述

4. 處理圖標溢出,實現過頁

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

5. 樣式的處理問題我就不贅訴了,太難了,用Google瀏覽器去調試比較容易

最終效果是
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章