项目开发中用到了swiper,但是出现了轮播拉不动的情况,排查问题好一阵,最终大佬一行代码解决了我的问题。
官方文档说明:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
注意
在 created 和 mounted 阶段,如果需要操作渲染后的视图,要使用 nextTick 方法。
应用场景
1,输入框获取焦点。
isFocus(){
this.$nextTick(function () {
// 获取焦点
document.getElementById("keywords").focus()
})
}
2,初始化组件(例如:Swiper)
// swiper
this.$nextTick(() => {
new Swiper(".swiper-container", {
// loop: true,
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
pagination: {
clickable: true,
},
});
});
}
3,等等等