在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
})
})
}
}
轮播就没问题了。