Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sufaith opened this issue Oct 26, 2019 · 0 comments
Assignees
Labels
optimizing Optimize performance or experience

Comments

@sufaith
Copy link

sufaith commented Oct 26, 2019

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页面的路由地址,如果等于,则执行上述保存的原始方法,如果不等于,则无需操作

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
optimizing Optimize performance or experience
Projects
None yet
Development

No branches or pull requests

3 participants