vue 下的swiper 的loop 和echarts 遇见的那一刻产生的坑

需求： 

        1.使用vue-awesome-swiper 去做 echarts 回路循环！

        2. 外层3个表格横向轮播， 里层表格上下轮播，三分钟刷新一下数据，前端写的计时器

原因：设计说，不环路滚动，用户体验不好！

前提 ：没加loop 的时候一切正常！ ，加上loop 后出现的一系列bug

最终的解决方案： 去掉了loop

---

一、少于一屏的时候应该不让他滚动，如果滚动会出现空白

解决方案： mySwiper.lockSwipes() 锁定Swiper ，也可以使用mySwiper.unlockSwipes() 解锁。

---

---

二 、 轮播里面套轮播

bug: 外层轮播没有被复制，数据更新时不会更新复制的dom里的数据。导致数据结果不对

三、 最主要的bug ： canvas 没有被复制

bug ： loop 后canvas标签没有被复制， 导致canvas 没有出现， 所以看起来像是轮空了一次。

出现问题后， 我查阅了各大网站，以及API 没有找到相应的方法！

大部分关于这个问题的都是click事件没有被复制， 所以使用了onclick！

后来找到一篇文章https://github.com/nolimits4web/Swiper/issues/18

大概意思就是如果有2帧数据， loop 后就是  1（最后一张幻灯片的副本）   < 01  >   0(第一张幻灯片的副本)

解决方案： 从第一张幻灯片  => 【克隆canvas】  =>  然后添加到  第一张幻灯片的副本上，也就是最后一个dom 结点，

很是开心的去试了一下， 由于我的项目是循环有很多的， canvas 很深，而且其实是echarts 自己绘画的canvas ，所以我选择直接克隆整个dom结点，然后放到最后一个dom里， 

结果，虽然canvas 已经被复制了， 但是依然没有出现绘图

最后弱弱的去掉了loop

源代码

现象：本来是2帧数据，复制后应该是4帧，但是由于canvas 没有显示出来， 所以就会轮空一次

轮循前结构