vue+swiper實(shí)現(xiàn)左右滑動的測試題功能

第vue+swiper實(shí)現(xiàn)左右滑動的測試題功能最近在做一個測試題，前后可以切換題目，點(diǎn)擊按鈕選擇答案，選擇答案的同時改變按鈕的背景色，如下圖所示：

初始代碼

我用了vue和swiper。所有的題目是一個對象數(shù)組，通過v-for渲染：

swiperref=mySwiper:options=swiperOptions

swiper-slidev-for=(item,index)inlistData:key=index

div>

一開始我把每道題目的answer存放在對象里面，點(diǎn)擊的按鈕時候切換answer的值，button的動態(tài)class監(jiān)聽到值改變后會引發(fā)背景色的改變。js部分：

goNext(index,answer){

this.$set(this.listData[index],answer,answer)

this.swiper.slideNext(100)

},

發(fā)現(xiàn)問題

測試發(fā)現(xiàn)這樣把點(diǎn)擊事件和動態(tài)樣式互相依賴，會造成大概幾百毫秒的延遲才執(zhí)行slideNext()，是可以直觀感受到的延遲。通過調(diào)試，發(fā)現(xiàn)造成延遲有兩方面的原因：

this.$set更改數(shù)組執(zhí)行完點(diǎn)擊事件到動態(tài)class監(jiān)聽到數(shù)據(jù)的改變中間也有延遲。

于是我換了一個思路，不把每個題目的answer放在對像數(shù)組里面，而是在data里面定義一個answerMap，這樣解決了問題1。為了解決問題2，我選擇把動態(tài)樣式:class去掉，改成用原生js在點(diǎn)擊事件里面直接修改class。這樣兩步下來，確實(shí)看不到延遲了。

優(yōu)化后的代碼

html部分

button@click=goNext($event,index,a)是/button

button@click=goNext($event,index,b)否/button

js部分

goNext(e,index,answer){

constelement=e.target

constbro=element.parentNode.children

for(leti=0;ibro.length;i++){

if(bro[i]!==element){

bro[i].classList.remove(active)

element.classList.add(active)

this.answerMap[this.listData[index].question]=answer

this.swiper.slideNext(100)

},

測試結(jié)果：可喜可賀，slideNext()不再有肉眼可見的延遲了。

有的時候為了少寫點(diǎn)代碼，不知不覺犧牲了性能。這次實(shí)踐，雖然原生JS使我增加了好幾行代碼，但是帶來的性能提升也是非常明顯的。