首先是實例化swiper

這里有一個注意點，就是實例化的時機

如果你的swiper內容是寫死的，可以在componentDidMount中實例化，但是如果你的內容是通過接口異步請求過來的，就必須在componentDidUpdate里實例化，因為如果在 componentDidMount 中實例化，異步請求過來的內容可能還沒有掛載完就實例化就會出現問題

componentDidUpdate(){

this.initialBannerSwiper()

}

這里還用到了一個知識點，就是單例模式，因為componentDidMount會多次執行，所以使用單例模式避免生成多個實例

initialBannerSwiper =()=>{

if(this.bannerSwiper){

return this.bannerSwiper //單例模式

}

this.bannerSwiper = new Swiper('#swiper-banner', {

slidesPerView: 1, //設置slider容器能夠同時顯示的slides數量(carousel模式) 默認值為1。

observer: true, //當改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時，自動初始化swiper。

observeParents: true, //將observe應用于Swiper的父元素。當Swiper的父元素變化時，例如window.resize，Swiper更新。

shortSwipes: false, // 這個屬性后面會說

slideToClickedSlide: false, //設置為true則點擊slide會過渡到這個slide。

loop: true, //開啟循環

autoplay: true, //設置為true啟動自動切換，并使用默認的切換設置。

pagination: {

clickable: true, //此參數設置為true時，點擊分頁器的指示點分頁器會控制Swiper切換。

el: '#swiper-pagination-banner',

}

})

this.hoverStop()

}

鼠標劃入停止輪播

swiper居然沒有這個api來控制，好吧 只能自己來用js來控制了

bannerSwiper.$el

swiper的container的Dom7/jQuery對象

Swiper4自帶有DOM7庫，因此無需另外加載Jquery等庫即可對Dom7對象使用以下常用的DOM操作

this.bannerSwiper.$el[0]就可以拿到 實例的container的dom節點

hoverStop = ()=>{

let that = this.bannerSwiper.$el[0] // 實例的container的dom節點

that.addEventListener("mouseenter", () => {

this.bannerSwiper.autoplay.stop()

that.addEventListener("mousemove", () => {

})

})

that.addEventListener("mouseleave",()=>{

this.bannerSwiper.autoplay.start()

})

}

你可能還會遇到一個小問題

這也是我遇到的，那就是鼠標劃到輪播圖的時候點擊輪播圖 會偶爾出現切換的情況，swiper有一個屬性可以控制 shortSwipes ,官方描述是這樣的

默認允許短切換。設置為false時，只能長切換，進行快速且短距離的滑動無法觸發切換。

為什么會出現這種情況呢，因為swiper是專注于移動端的，劃上swiper點擊的時候可能鼠標方向偏了一點，swiper會以為你是手機上的滑動，設置為false時，短距離的滑動就不會發生切換了，下面是官方的說法

Swiper常用于移動端網站的內容觸摸滑動

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。

Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

最后

記得在組件卸載的時候解綁事件和銷毀swiper實例哦

componentWillUnmount(){

if(this.bannerSwiper){

this.bannerSwiper.detachEvents()

this.bannerSwiper.destroy()

}

}

swiper真的強大，了解更多請參考 swiper 文檔

如果對您有幫助記得給個 喜歡 哦

總結

以上是生活随笔為你收集整理的swiper移入暂停_react中swiper注意事项及鼠标划入停止轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。