ajax循环播放轮播,解决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项目中的代码：

1 export defaultclass Fime extends Component{2 constructor(){3 super();4 this.state={5 bannerImgArr:[]6 }7 }8 componentDidMount(){9 //轮播

10 //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 })33 }34 render(){35 let imgHtml=this.state.bannerImgArr.map((item,index)=>{36 return(37

38

39

40 )41 })42 return(43

44

45 {/*轮播图部分*/}46

47

48 {imgHtml}49

50

51

52

53

54 )55 }56 }

效果展示：