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