1. 程式人生 > >$nextTick() Swiper輪播元件

$nextTick() Swiper輪播元件

在vue中使用Swiper輪播元件,最先想到的是在watch中new一個Swiper

watch: {
      categorys(value) {
          new Swiper('.swiper-container', {
            pagination: {
              el: '.swiper-pagination',
            },
            loop: true
          })
      }
    }

但是發現輪播還是沒實現,因為watch只是監視資料更新,但是介面還沒有更新,所以Swiper沒有效果,
後來發現vue例項方法有this.$nextTick()(也有全域性的Vue.nextTick),官方解釋如下:

  • 在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。

說的通俗點就是:一旦介面完成更新,立即呼叫(但此條語句一定要寫在資料更新之後)
修改後的程式碼 :

watch: {
      categorys(value) {
        this.$nextTick(function () {
          new Swiper('.swiper-container', {
            pagination: {
              el: '.swiper-pagination',
            },
            loop: true
          })
        })
      }
    }

輪播就沒問題了。