search

didi / mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
https://didi.github.io/mand-mobile
Apache License 2.0
3.46k stars 772 forks source link

MdSwiper组件 在两个页面切换的时候 Events面板里面无限循环出现"before-change"和"after-change" #338

Closed songjintao closed 5 years ago

songjintao commented 5 years ago

Mand Mobile Version

2.0.0

一、复现步骤 快速切换路由，其中一个页面有MdSwiper,另一个页面没有

二、期待行为 不出现无限循环的调用事件

三、 实际行为

  1. 无限循环的调用，并且速度比较快，导致浏览器卡死
  2. type为 emit
  3. payload内容为[2,0]或[1,2]或[0,1]
xxyan0205 commented 5 years ago

请用https://codesandbox.io 提供一个复现问题的示例

songjintao commented 5 years ago

问题解决了，但是解决的办法更匪夷所思，我在有swiper的那个组件的mounted上加上this.$refs.swiper.stop(); 就可以让他在切换其他页面时停止执行问题上的那两个emit了。。。黑人问号？？？？ 然后切换回去swiper还能继续执行。 有点搞不懂了。

songjintao commented 5 years ago

this.$refs.swiper.stop(); 加到destroyed上就报stop未定义的错误

songjintao commented 5 years ago

问题我再描述下，假设autoplay为3000，每次切换到有swiper的页面，就会每3秒执行一次问题上的那两个emit，切换到其他没有swiper的页面，仍然会继续执行。但是当再次切换到带swiper页面中的时，会每三秒执行两次问题上的emit，所以当多次切换时就会出现大量的emit,快速执行，一会就会造成浏览器卡死

xxyan0205 commented 5 years ago

fixed@2.1.5