vue 換一換功能

走在路上的晶晶丫發表於2020-12-09
Vue

大家自己去百度上看一下他們的換一換功能，就能明白是什麼意思啦

在普通一點的說，換一換功能與分頁功能一致，以百度首頁為例，當前頁面為1，當前頁面的資料為6，當前資料為1-6，在點選換一換之後，資料會變成7-12，那這個是如何實現的呢，原理就在於每點選一次換一換的時候，當前所在頁面+1，即在查詢時查詢第二頁的6個資料，就變相的達到了分頁的效果了，然而我們多點幾次，發現在資料為30之後，再點選換一換，資料又回來了，這裡的話就需要加一個限制，噹噹前的頁數為5時，將當前頁面數重新賦值為1，這樣資料就可以輪著換啦，資料到30後，再點選換一換即可以看到資料從1開始繼續迴圈了

但我們在實際應用過程中，也會出現資料不足30條的情況，就要另外處理啦

cilckChangeIt() {
      if (this.lengthIdent === 6 && this.currentPage !== 5){
        this.currentPage++
      } else if (this.lengthIdent < 6){
        this.currentPage = 1
      } else if (this.currentPage === 5){
        this.currentPage = 1
      }
      this.init()
}

其中init方法就是重新查資料的方法，lengthIdent 為從後臺介面中查詢資料的長度，currentPage為第幾頁

但是這種情況會出現一種情況，若現在的數目為12條時，會出現一次沒有資料的情況，下一次換一換的時候才會回到第一頁

這裡就需要在查詢方法判斷了，若查詢回來的數目為空，在給lengthIdent賦值之前進行判斷，若從後臺查詢回來的資料為空，直接將currentPage置為1，重新呼叫init方法就可以解決啦

有什麼想法再一起交流呀

 

相關文章