首先是實(shí)例化swiper

這里有一個(gè)注意點(diǎn)，就是實(shí)例化的時(shí)機(jī)

如果你的swiper內(nèi)容是寫死的，可以在componentDidMount中實(shí)例化，但是如果你的內(nèi)容是通過接口異步請(qǐng)求過來(lái)的，就必須在componentDidUpdate里實(shí)例化，因?yàn)槿绻?componentDidMount 中實(shí)例化，異步請(qǐng)求過來(lái)的內(nèi)容可能還沒有掛載完就實(shí)例化就會(huì)出現(xiàn)問題

componentDidUpdate(){

this.initialBannerSwiper()

}

這里還用到了一個(gè)知識(shí)點(diǎn)，就是單例模式，因?yàn)閏omponentDidMount會(huì)多次執(zhí)行，所以使用單例模式避免生成多個(gè)實(shí)例

initialBannerSwiper =()=>{

if(this.bannerSwiper){

return this.bannerSwiper //單例模式

}

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

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

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

observeParents: true, //將observe應(yīng)用于Swiper的父元素。當(dāng)Swiper的父元素變化時(shí)，例如window.resize，Swiper更新。

shortSwipes: false, // 這個(gè)屬性后面會(huì)說(shuō)

slideToClickedSlide: false, //設(shè)置為true則點(diǎn)擊slide會(huì)過渡到這個(gè)slide。

loop: true, //開啟循環(huán)

autoplay: true, //設(shè)置為true啟動(dòng)自動(dòng)切換，并使用默認(rèn)的切換設(shè)置。

pagination: {

clickable: true, //此參數(shù)設(shè)置為true時(shí)，點(diǎn)擊分頁(yè)器的指示點(diǎn)分頁(yè)器會(huì)控制Swiper切換。

el: '#swiper-pagination-banner',

}

})

this.hoverStop()

}

鼠標(biāo)劃入停止輪播

swiper居然沒有這個(gè)api來(lái)控制，好吧 只能自己來(lái)用js來(lái)控制了

bannerSwiper.$el

swiper的container的Dom7/jQuery對(duì)象

Swiper4自帶有DOM7庫(kù)，因此無(wú)需另外加載Jquery等庫(kù)即可對(duì)Dom7對(duì)象使用以下常用的DOM操作

this.bannerSwiper.$el[0]就可以拿到 實(shí)例的container的dom節(jié)點(diǎn)

hoverStop = ()=>{

let that = this.bannerSwiper.$el[0] // 實(shí)例的container的dom節(jié)點(diǎn)

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

this.bannerSwiper.autoplay.stop()

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

})

})

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

this.bannerSwiper.autoplay.start()

})

}

你可能還會(huì)遇到一個(gè)小問題

這也是我遇到的，那就是鼠標(biāo)劃到輪播圖的時(shí)候點(diǎn)擊輪播圖 會(huì)偶爾出現(xiàn)切換的情況，swiper有一個(gè)屬性可以控制 shortSwipes ,官方描述是這樣的

默認(rèn)允許短切換。設(shè)置為false時(shí)，只能長(zhǎng)切換，進(jìn)行快速且短距離的滑動(dòng)無(wú)法觸發(fā)切換。

為什么會(huì)出現(xiàn)這種情況呢，因?yàn)閟wiper是專注于移動(dòng)端的，劃上swiper點(diǎn)擊的時(shí)候可能鼠標(biāo)方向偏了一點(diǎn)，swiper會(huì)以為你是手機(jī)上的滑動(dòng)，設(shè)置為false時(shí)，短距離的滑動(dòng)就不會(huì)發(fā)生切換了，下面是官方的說(shuō)法

Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)

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

Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。

Swiper開源、免費(fèi)、穩(wěn)定、使用簡(jiǎn)單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！

最后

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

componentWillUnmount(){

if(this.bannerSwiper){

this.bannerSwiper.detachEvents()

this.bannerSwiper.destroy()

}

}

swiper真的強(qiáng)大，了解更多請(qǐng)參考 swiper 文檔

如果對(duì)您有幫助記得給個(gè) 喜歡 哦

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。