解決一個頁面多個 swiper 衝突

當你在當前頁面使用了多個swiper組件時，則會出現衝突，這個沒什麼可說的，直接上代碼言簡意賅

這是第一個Swiper

//這是第一個Swiper
<div id={style.banner} className="swiper-container swiper1">
    <div className="swiper-wrapper">
        {
            this.props.homeBannerList.map((v, i) => (
                <div key={i} className="swiper-slide">
                    <img src={v.image_url} alt="" title={v.title} />
                </div>
            ))
        }
    </div>
    <div className="swiper-pagination" id={'swiper1'}></div>
</div>

這是第二個Swiper

//這是第二個Swiper
<div id={style.swiper_container} className="swiper-container swiper2">
    <div className="swiper-wrapper">
        {
            this.props.vipHomeSchedular.map((v) => (
                <div key={v.schedular_id} className="swiper-slide">
                    <div className={style.swiper_list}>
                        <div className={style.swiper_list_item}>
                            <a href="">
                                <img src={v.pic} alt="" />
                            </a>
                        </div>
                        <div className={style.swiper_list_info}>
                            <a href="">
                                <h3>{v.schedular_name}</h3>
                                <p>
                                    <span>{v.min_discount}</span>
                                    <span>折起</span>
                                </p>
                            </a>
                        </div>
                        <a href="">
                            <span className={style.swiper_list_buy}>立即搶購</span>
                        </a>
                    </div>
                </div>
            ))
        }
    </div>
    <div className="swiper-pagination" id={'swiper2'}></div>
</div>

這是第三個Swiper

//這是第三個Swiper
<div className="swiper-container swiper3">
   <div className="swiper-wrapper">
        {
            this.props.hostShowList.map((v, i) => (
                <div key={i} className="swiper-slide" id={style.swiper_slide_active}>
                    <a href="">
                        <div className={style.hot_list_item}>
                            <img src={v.pic} alt="" />
                        </div>
                        <h3>{v.show_name}</h3>
                    </a>
                </div>
            ))
        }
    </div>
</div>

這是第四個Swiper

//這是第四個Swiper
<div className="swiper-container swiper4">
    <div className="swiper-wrapper">
        {
            this.props.postponeShowList.slice(1).map((v) => (
                <div key={v.sche_id} className="swiper-slide" id={style.stage_list_swiper_active}>
                    <a href="">
                        <div className={style.stage_list_swiper_pic}>
                            <img src={v.pic} alt="" />
                        </div>
                        <h3>{v.schedular_name}</h3>
                        <p>
                            <strong>¥{v.low_price}</strong>
                            <span>起</span>
                        </p>
                    </a>
                </div>
            ))
        }
    </div>
</div>

Swiper實例

//第一個Swiper的實例
new Swiper('.swiper1', {
    autoplay: true,
    direction: 'horizontal',//豎向輪播
    loop: true,//無縫輪播
    pagination: {//小圓點分頁
        el: '#swiper1',
    }
})
//第二個Swiper的實例
new Swiper('.swiper2', {
    autoplay: true,
    direction: 'horizontal',//豎向輪播
    loop: true,//無縫輪播
    pagination: {//小圓點分頁
        el: '#swiper2',
    }
})
//第三個Swiper的實例
new Swiper('.swiper3', {
    slidesPerView: 3,
    spaceBetween: 0
})
//第四個Swiper的實例
new Swiper('.swiper4', {
 slidesPerView: 3,
    spaceBetween: 0
})

很簡單，就是一個Swiper對應一個實例，通過自定義class/id名來進行綁定，這樣就會使它們各玩各的，互不影響。