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

效果展示:

   解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

上一篇:Struts2中通过Ajax传递json数据


下一篇:微信返回上一页,页面中的AJAX的请求,对Get请求无效的解决办法