首頁輪播圖插件一般有swiper和mint-ui兩個，這裏主要講解swiper，一般市配置，結構，樣式，導出對象
其中，挨着body的意思是要在界面渲染完成後，在進行初始化，因爲js是通過選擇渲染好的組件，修改組件，所以對應到vue中，是在mounted生命週期方法內完成
1 基於網頁的輪播圖
- 檢索swiper使用說明，確定html結構
- 修改slide嵌套的內容
- 下載swiper
npm i swiper -S - 導入swiper
- 導入對應的css文件
- 在mounted中給渲染好的組件綁定對象配置方法
-
查找pagination-bullet的類名
![]()
- 由於swiper4.0x的默認樣式不能在scoped中覆蓋
要在下面新建一個scoped覆蓋原有的paginantion樣式 -
在index中導入組件並註冊使用
![]()
![]()
![]()
![]()
2 基於json格式數據請求的輪播圖
- 添加api/index中的getHome方法
- 添加state中的homeInfo:{}對象
- 添加mutation-type中的修改首頁數據方法名
- 添加mutatiaons中的DEFAULT_HOME方法名
- 添加actions中的requestHome方法
- 在pages/index/index中的created生命週期函數中請求數據
- 在pages/index/children/banner的computed中獲取state數據
- 在banner組件中渲染獲取的數據
-
在main.js中導入store並註冊
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
