解決ajax異步請求數據后swiper不能循環輪播(loop失效)問題、滑動后不能輪播的問題。

問題描述：

       1、我使用axios異步請求后台的圖片進行渲染后不能實現循環輪播，也就是loop失效，但是靜態寫死的情況下不會出現這種問題。

       2、

分析：

        swiper的機制是：初始化的時候將swiper-warpperslide類下的最后一個swiper-slide塊克隆到第一個的位置，將第一個swiper-slide塊克隆島最后一個的位置，然后自動掃描swiper-warpperslide類下有多少個swiper-slide滑塊，則允許滑動多少個塊。因為我們異步請求數據之前，swiper-warpperslide類下沒有swiper-slide滑塊，所以不會出現循環輪播的效果。

解決辦法：

        在axios請求后的成功回調方法中初始化swiper方法。

        解決 滑動后不能自動輪播：將  disableOnInteraction:false 寫在autoplay內

           

 

以下是react項目中的代碼：

 

export default class Fime extends Component{
    constructor(){
        super();
        this.state={
            bannerImgArr:[]
        }
    }
    componentDidMount(){
        // 輪播
        // axios請求后台圖片
11         getBannerList().then((result)=>{
12            this.setState({
13                bannerImgArr:result
14            },()=>{
15             //    初始化swiper
16              new Swiper('.swiper-container', {
17                 observer: true,
18                 direction:'horizontal',
19                 loop: true,
20                 initialSlide:0,
21                 speed:1000,
22                 autoplay:{ 23 delay:2000, 24 disableOnInteraction:false, //解決滑動后不能輪播的問題 25 }, 
26                 // 注意分頁器的寫法：
27                 pagination: {
28                     el:'.swiper-pagination'
29                 },
30               })
31            })
32         })
    }
    render(){
            let imgHtml=this.state.bannerImgArr.map((item,index)=>{
                return(
                    <div className="swiper-slide"  key={index}>
                        <img src={item} />
                    </div>
                )
            })
        return (
            <div className='film-page'>
                <div className='bannner-box'>
                {/* 輪播圖部分 */}
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            {imgHtml}
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        )
    }
}

 效果展示：