vue keep-alive配合swiper的问题(转载)

转载于https://www.cnblogs.com/cscredis/p/9703286.html

  问题描述,首页优化使用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代码:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值