先展示最終效果:
解決思路:
vue的理念是以數(shù)據(jù)驅(qū)動(dòng)視圖,所以拒絕通過改變?cè)氐膍argin-top來實(shí)現(xiàn)滾動(dòng)效果。
寫好css樣式,只需改變每張圖片的class即可實(shí)現(xiàn)輪播效果,可以將輪播圖看成兩個(gè)。
代碼實(shí)現(xiàn):
各個(gè)slide的樣式:
模板包含兩個(gè)輪播圖:
scripts部分,設(shè)置一個(gè)nowIndex,定時(shí)改變nowIndex。所有圖片的class根據(jù)這個(gè)nowIndex來變化,這里使用了es6的map類型:
slideConfig,這里可以寫成組件的props:
更多關(guān)于“前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué),課程大綱緊跟企業(yè)需求,更科學(xué)更嚴(yán)謹(jǐn),每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升,都可以找到適合的班型,千鋒教育隨時(shí)歡迎你來試聽。