zoukankan      html  css  js  c++  java
  • 在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
    });

    -------------------------------------------

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

    万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!

  • 相关阅读:
    HTTP请求中的GET-POST方式
    拦截器与过滤器的不同点
    SQL练习题(一)
    Maven聚合工程安装时排除掉不参与本次安装的子工程
    codeforce 796C
    [CF1216E] Numerical Sequence hard version
    【floyd+矩阵乘法】POJ 3613 Cow Relays
    BZOJ 3573米特运输
    Poj 3977 Subset
    【树形dp】Bzoj 1040骑士
  • 原文地址:https://www.cnblogs.com/mahmud/p/10503590.html
Copyright © 2011-2022 走看看