最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

學(xué)習(xí)了vue.js也有一段時間了，做了個小demo來熟悉一下，很常見的demo，-------輪播圖，沒學(xué)vue之前的輪播圖用JavaScript或者jquery都非常簡單，發(fā)現(xiàn)用vue來寫也挺有意思的。說下簡單的思路，圖片的輪播用v-if或者v-show來代替原來的Js滑動，過度效果用transition可簡單實現(xiàn)，注意，滑動過程中是能看見兩張圖的，所以要用兩個transition。

成都創(chuàng)新互聯(lián)公司主營仲巴網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),仲巴h5微信平臺小程序開發(fā)搭建,仲巴網(wǎng)站營銷推廣歡迎仲巴等地區(qū)企業(yè)咨詢

（1）先寫出整體的框架

根據(jù)imgArray這個照片的數(shù)組渲染小圓點的數(shù)量，為span綁定on為小圓點點亮的狀態(tài)，照片的顯示隱藏通過自定義變量ifshow來顯示，nowindex則控制輪播對應(yīng)的照片。

（2）輪播圖的數(shù)組，如果是本地的圖片，而且不放在static文件下的，請用require圈上路徑，否則路徑會報錯。如果是從后臺服務(wù)器獲取的則不需要。

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

（3）主要就是通過改變自定義變量nowindex來改變輪播圖的狀態(tài)，要注意滑動的過程是能看見兩張圖的，所以在goto函數(shù)中設(shè)置了一個短暫的定時器，讓一張顯示另一張隱藏，分別加上不同的過度效果。

到這里，這個簡單的輪播圖就到此結(jié)束了。

關(guān)于vue.js的學(xué)習(xí)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。