在页面的每个tab切换块里嵌套swiper轮播

在一个页面里可以同时放多个swiper轮播，但是放在tab切换里，问题就很多。

结构如下，‘main-content’是两个需要切换的tab内容块，每个'main-content'里都有一个‘swiper-container’。（对于swiper插件自带的class名，我们在引用swiper的时候不要修改，如果要对样式做修改或者添加新的js效果，可以添加新的类名或者id）

     

一开始我是按照一个页面放多个swiper轮播的方法做的（方法1）：

    

这种方法在两个swiper轮播同时显示在页面上时，是没有问题的，但是在tab切换中，会出现一系列问题：比如切换到第二个tab后再切回第一个tab，第一个轮播就不动了或者图片左右滑动，但是按钮不会跟着动等等问题。

中间还用过其它几个方法，比如（方法2）tab切换的同时把“swiper-container”这个类名给当前轮播块而其它轮播块移除这个类名。反正这些方法都有各种各样的问题。其实我现在对会出现这些问题的原因也不清楚也懒得去探究了，所以就基于方法1继续改进。

方法3：将每个swiper对象放在函数里，当tab切换时，执行相应swiper函数：

但是问题依然出现了，我猜想是因为每次切回tab都重复创建了一个相同的swiper对象导致的。所以我认为应该在每次切换tab时清除以前创建过得swiper对象，于是用到了swiper.destroy（）方法（destroy()具体用法我也不清楚，但是可以用在这儿，我看见网上有类似的用法）。于是最终代码是（方法4）：

其中的createSwiper()方法为：

总之，这个问题被我东平西凑总算是解决了，虽然我自己也有点糊里糊涂的。不过swiper感觉还是很方便的插件呀，尤其是在手机端。

诶，最近越来越不明白我是怎么让自己走上了程序员的道路呢？再也不能做活蹦乱跳地美少女咯，实习以来，我连话都少了好多哦！哭哭！