首頁輪播圖插件一般有swiper和mint-ui兩個，這里主要講解swiper，一般市配置，結(jié)構(gòu)，樣式，導(dǎo)出對象
-
https://www.swiper.com.cn/usage/index.html
輪播圖的組成.png
輪播圖的初始化.png
其中，挨著body的意思是要在界面渲染完成后，在進行初始化，因為js是通過選擇渲染好的組件，修改組件，所以對應(yīng)到vue中，是在mounted生命周期方法內(nèi)完成
1 基于網(wǎng)頁的輪播圖
- 檢索swiper使用說明，確定html結(jié)構(gòu)
- 修改slide嵌套的內(nèi)容
- 下載swiper
npm i swiper -S - 導(dǎo)入swiper
- 導(dǎo)入對應(yīng)的css文件
- 在mounted中給渲染好的組件綁定對象配置方法
-
查找pagination-bullet的類名
image.png - 由于swiper4.0x的默認樣式不能在scoped中覆蓋
要在下面新建一個scoped覆蓋原有的paginantion樣式 -
在index中導(dǎo)入組件并注冊使用
image.png
image.png
image.png
image.png
2 基于json格式數(shù)據(jù)請求的輪播圖
- 添加api/index中的getHome方法
- 添加state中的homeInfo:{}對象
- 添加mutation-type中的修改首頁數(shù)據(jù)方法名
- 添加mutatiaons中的DEFAULT_HOME方法名
- 添加actions中的requestHome方法
- 在pages/index/index中的created生命周期函數(shù)中請求數(shù)據(jù)
- 在pages/index/children/banner的computed中獲取state數(shù)據(jù)
- 在banner組件中渲染獲取的數(shù)據(jù)
-
在main.js中導(dǎo)入store并注冊
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
