Skip to content
This repository was archived by the owner on Apr 15, 2026. It is now read-only.
This repository was archived by the owner on Apr 15, 2026. It is now read-only.

[bug-report] swiper所在页面开启keepAlive模式时跳到其他页面触发resize事件再返回,状态无法保存 #599

@sufaith

Description

@sufaith

Mand Mobile Version

2.5.3

Vue Version

2.6.10

Model / OS & Browser Info

iphone wechat

Recurring Steps

A页面(开启了keepAlive模式)引用了md-swiper组件

1.A页面点击swiper或其他元素跳转到B页面
2.B页面触发resize事件(更改窗口大小、横竖屏切换、苹果手机微信里打开第2个页面时自动在底部添加前进后退的导航栏也会触发resize)
3.返回A页面查看页面样式

Expectant Behaviors

开启了keepAlive模式的A页面跳转到B页面后,即使B页面触发了resize事件,也不影响A页面的swiper组件, 返回A页面时一切正常

Actual Behaviors

1.当B页面触发resize时, 会导致A页面的swiper立即重绘(源码里执行了$_resize方法)
2.当返回A页面时,swiper-item的宽度为0 (状态没保存,swiper-item尺寸异常, 页面显示不正常)


临时解决方案(参考了#596):
1.在A页面挂载时, 获取swiper引用,保存其原始$_resize方法, 保存A页面路由地址
2.重写swiper的$_resize方法, 方法体内容为: 判断事件当前触发的路由地址是否等于A页面的路由地址,如果等于,则执行上述保存的原始方法,如果不等于,则无需操作

Metadata

Metadata

Labels

optimizingOptimize performance or experience

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions