《vue+vant+node+mongoDB+koa2》電商項目實戰連載(5)

這一節要做的是首頁的輪播圖模塊,做好了之後,效果應該就是這樣式的,

我們使用的是vant框架的 Swipe 輪播組件,

查看文檔得到,使用它,應該先把它import進入進來,就像這樣,

然後src/main.js的文件就是這樣,

然後我在網上找了三張圖片,把它們的路徑鏈接寫在vue文件中的data裏,

<!-- 使用輪播圖組件 -->

現在我們已經有數據了,那麼怎麼使用它呢?接着看代碼的文檔、演示,

喔~~~,原來是這樣,其實還是一些封裝好的自定義組件。把上面的代碼直接複製到vue的template中,

這時如果你沒有寫錯的話,頁面上就應該會出現輪播圖效果了。

<!-- 處理懶加載 -->

然後同學們有沒有注意到,咱們的圖片是http的遠程圖片,這種情況下我們需要處理一下懶加載,接着看文檔,

就像剛纔那樣將Lazyload組件引入進來,然後在v-for循環中將加入就可以了,

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