使用swiper插件實現tab切換

剛開始使用的是圖片畫廊效果(http://www.swiper.com.cn/demo/23-thumbs-gallery.html)，實現雙向綁定：也就是上面滑動，下面的slide也會隨之滑動；可是有一個問題，上面那裏必須有一個參數：centeredSlides:true;不然會出現active的slide上下不一致的問題。如圖：

 

在gallery-top中，active-slide是第三個；而在gallery-thumbs中，active-slide是第七個。

可是嘞，在swiper官網首頁，看到他們的介紹說Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果。我以爲本身陷入了偷懶的誤區。

其實這個tab切換跟以前寫的那些差很少，只是如今加上了一個滑動效果啊。。。

用到swiper的api就是slideTo和onSlideChangeStart,以下圖：

 

如今，開始寫新頁面吧~~

嗯，爭取何時本身寫個相似swiper的插件。。。