zoukankan      html  css  js  c++  java
  • 关于vue keep-alive配合swiper的问题

    问题描述,首页优化使用keep-alive之后,从别的页面跳回来,swiper轮播不播放,查了好久资料,有的说要重新调用swiper的init方法进行初始化,等等,最终都没能解决问题,最终通过查看文档得知keep-alive缓存组件的是created钩子会创建一个cache对象,用来作为缓存容器,保存vnode节点。destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

    由此猜想,从其他页面跳回来时,显示的页面可能只是vnode节点,还有渲染出html标签就执行了new了swiper实例,导致swiper的实例无法挂在到实际的html元素上,所以出现轮播无法播放的问题。

    解决方法:

      keep-aive组件支持两个钩子,activated钩子在keep-alive组件中代替了created钩子每次初始化时调用activated,deactivated为销毁时的钩子,所以可以申明一个状态,让keep-alive组件渲染成html元素后再实例化swiper,就可以解决这个bug。

    开始上截图!!

    html代码:

      

    js代码:

      

      

    此方法只是解决了个人需求,记录下来主要是为了提升记忆,如果可以帮助到别人最好,如果帮助不到,请勿喷!!!

  • 相关阅读:
    EL表达式遍历方法之一
    django auth认证
    总结五个在办公中使用很爽的软件
    django所遇到问题简单总结
    django 远程数据库mysql migrate失败报error 1045之 解决方案
    深拷贝和浅拷贝之地址改变
    序列表转换成横向菜单
    Pycharm破解
    css里涉及到定位相关的example实例
    记录求职
  • 原文地址:https://www.cnblogs.com/cscredis/p/9703286.html
Copyright © 2011-2022 走看看