$nextTick() Swiper轮播组件 末蓝、 2022-04-11 14:23 231阅读 0赞 在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 }) }) } } 轮播就没问题了。
还没有评论,来说两句吧...