在頁面的每個tab切換塊裡巢狀swiper輪播

2021-07-25 06:42:52 字數 1302 閱讀 1578

在乙個頁面裡可以同時放多個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感覺還是很方便的外掛程式呀,尤其是在手機端。

誒,最近越來越不明白我是怎麼讓自己走上了程式設計師的道路呢?再也不能做活蹦亂跳地美少女咯,實習以來,我連話都少了好多哦!哭哭!

頁面Tab切點選切換

tab head tab head a tab head bg tab head bg img html部分 tab1 tab1 tab1 tab2 tab2 tab2 tab3 tab3 tab3 tab4 tab4 tab4 js部分 function tab2 click function t...

jquery mobile切換頁面的幾種方法

有幾種方法來切換頁面 1.mobile.changepage path to page.html 2.mobile.changepage other page.html fade false,false 可以設定頁面切換效果,以及定義引數來控制頁面是否記錄歷史等 3.var pagedata mob...

(記)video player在頁面的使用

npm i vue video player video import videoplayer from vue video player import video.js dist video js.css import vue video player src custom theme.css i...