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

摘要:
问题描述:1、我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题。因为我们异步请求数据之前,swiper-warpperslide类下没有swiper-slide滑块,所以不会出现循环轮播的效果。

问题描述:

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                     <div className="swiper-slide"  key={index}>
38                         <img src={item} />
39                     </div>
40 )
41 })
42         return(
43             <div className='film-page'>
44                 <div className='bannner-box'>
45                 {/*轮播图部分 */}
46                     <div className="swiper-container">
47                         <div className="swiper-wrapper">
48 {imgHtml}
49                         </div>
50                         <div className="swiper-pagination"></div>
51                     </div>
52                 </div>
53             </div>
54 )
55 }
56 }

效果展示:

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

免责声明:文章转载自《解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇微信公众平台消息接口PHP版HDFS+MapReduce+Hive+HBase十分钟快速入门下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

ajax全局事件

作用:当你的页面存在很多ajax事件的话,我们有一些信息是公共的,可以复用,我们可以用全局事件进行编写,因为每一个ajax事件调用,都会触发ajax全局事件。   jquery的ajax方法的全部全局事件:     ajaxStart:ajax请求开始前     ajaxSend:ajax请求时     ajaxSuccess:ajax获取数据后     ...

深入剖析jsonp跨域原理

在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理。搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求; 2)jsonp跨域的原理到底是什么; 3)除了jsonp跨域之外还有那些方法绕过“同源策略”,实现跨域访问; 4)jsonp和ajax,或者说jsonp和XMLHttpReque...

Vue项目加载本地的json数据模拟请求后台数据

1. 安装express和axios npm i express --save & npm i axios --save 网速不好的,可以安装淘宝镜像,使用cnpm 2. 在main.js中引入axios,并挂载到全局 import axios from ‘axios’; Vue.prototype.$axios = axios; 3.在项目中st...

[大数据技术]Kettle初次连接MySQL数据库 报错问题 错误连接数据库 Error occured while trying to connect to the database Exception while loading class org.gjt.mm.mysql.Driver

报错内容如下: 1 错误连接数据库 [foodmartconn] : org.pentaho.di.core.exception.KettleDatabaseException: 2 Error occured while trying to connect to the database 3 4 Exception while loading cla...

Linq排序,获取前5条数据

_dic = _dic.OrderByDescending(x => x.Value).ToDictionary(x=>x.Key,x=>x.Value); var Num = _dic.ToList().Take(5).Select(a => a.Key.ToString()).ToArray(); var Str = strin...

微信小程序基础学习笔记2:数据绑定相关

VUE语法 所有前端wxml中绑定的数据变量,都要定义在data中。 绑定事件,bindTap res ,取数据 currentTarget->dataset 这里的data-id中的data必须写,后面的id、title等可以任意自定义,H5的新属性,后面的id全部要用小写 myTap:function(res){ console.write }...