首先是實例化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 文檔
如果對您有幫助記得給個 喜歡 哦
)
