vue-awesome-swiper 填坑（倒腾vue-awesome-swiper的第三波）

前面两篇博客在这里：

vue-awesome-swiper 实现轮播图和缩略图联动_wxCSDN1997的博客-CSDN博客

vue-awesome-swiper优化使用_wxCSDN1997的博客-CSDN博客

新需求是：  每个展示的产品点进详情页面，应该分别展示各自的轮播图（因此图片数据是动态变化的）。（之前的情况是只完成一个页面的轮播图就行了）

坑1：

不知道为什么，是不是项目中和其他组件冲突的问题，轮播图不能轮播，同时缩略图之间还没有空隙。无法轮播这个问题很严重，上网搜了解决办法，一个一个试。通过下面解决办法解决轮播问题。

vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay) - heyushuo - 博客园

轮播图和缩略图同时加上这两个属性

 坑2：

由于不同的产品点进来，轮播图的图片是需要更新的。请看我的另一篇博客

VUE实现 父组件向子组件动态传值功能（其中一种方法）_wxCSDN1997的博客-CSDN博客

如果不刷新组件，很可能导致数据错乱从而导致图片显示异常。

优化：

对轮播图片数量做判断

当数量为0  1 和 大于1张时

1）为0 时   通过弹框提示

 2）区分数量为1 和 大于1 

借鉴下面大大的博客

VUE swiper只有一张图片的时候不滑动，多张滑动_天下武功唯CODING不破-CSDN博客_swiper只有一张图

 

 

补充：————————————————————————————————————

控制轮播图暂停自动轮播 和 恢复自动轮播

vue中使用vue-awesome-swiper做轮播 ，手动滑动、vue-router路由跳转和动态更新数据，导致自动轮播失效问题_小媚子~的博客-CSDN博客