vue前端，嵌套三层的时候$nextTick失效

Posted 2023-05-01

参考技术A pageA是一个页面，引入pageB,pageB是一个对话框，引入pageC页面
下面是正确的调用姿势，pageB不能跟pageA一样写在一起，需要拆分开，所以pageA调用B的时候先显示对话框再用$nextTick加载。

在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？

在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？

是因为swiper提前初始化了，那时候数据还没有完全出来。这里有两种解决办法

1. 使用vue提供的$nextTick()方法

当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。

在数据初始化完毕之后，再初始化swiper就不会出现问题了

this.$nextTick(function () {

              var swiper = new Swiper(‘.swiper-container‘, {

        此处省略

         }）

            })

2.在swiper初始化的时候

swiper1 = new Swiper(‘.swiper-container‘, {

    initialSlide :0,

    observer:true,//修改swiper自己或子元素时，自动初始化swiper

    observeParents:true//修改swiper的父元素时，自动初始化swiper

});