解决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>
        )
    }
}

 效果展示：