移动端h5踩坑之 在swiper内结合css实现缩放效果出现放大又缩小的问题

html-css09

移动端h5踩坑之 在swiper内结合css实现缩放效果出现放大又缩小的问题,第1张

背景 :首先用swiper实现了几个卡片类页面的滑动效果,初始状态为缩小状态,即(图1):

问题 :正常情况下是没有问题的,但是在ios12以下的系统会出现点击放大后马上又缩小的问题,且问题只出现在点击的那个‘卡片’, 滑动切换其他的都正常。

解决 :找了很久,最终发现应该是页面在渲染的时候出了问题,页面元素已经到了全屏下的位置,但是看到的位置却不对。把重新初始化swiper的方法放到$nextTick()方法内就可以了。

在onTransitionEnd(swiper) 或者 onSlideChangeEnd(swiper)回调中给当前页添加动画类,其他页移除动画类,其中 swiper.activeIndex 为当前活动块的索引。