问题描述:

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失效)问题、滑动后不能轮播的问题。的更多相关文章

  1. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  2. ajax异步请求数据

    源码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)

    /查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...

  4. 09.1.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回数组

    09.1html里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. java-cef嵌入基于Chrome内核浏览器,做页面爬虫(可以尽在ajax异步请求数据)

    1 CentOS 7.0 上安装和配置 VNC 服务器 2.1 2.1.1 首先,我们需要一个可用的桌面环境(X-Window),如果没有的话要先安装一个. 注意:以下命令必须以 root 权限运行. ...

  6. 【坑】前端使用ajax异步请求以后,springMvc拦截器跳转页面无效

    文章目录 前言 `$.ajaxSetup( )` 后记 前言 本文着重解决前后端分离开发的页面调整问题. 笔者,在做一个需求,需要对访问网站,但是没有登录的用户进行拦截,将他们重定向到首页. 很简单的 ...

  7. ajax异步请求302分析

    1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳 ...

  8. python爬虫(3)——用户和IP代理池、抓包分析、异步请求数据、腾讯视频评论爬虫

    用户代理池 用户代理池就是将不同的用户代理组建成为一个池子,随后随机调用. 作用:每次访问代表使用的浏览器不一样 import urllib.request import re import rand ...

  9. ajax异步请求不能刷新数据的问题

    搞了两三天的问题,今天解决了.总结下: function reportGrpChange(cuid, title){ document.getElementById('reportFrameDiv') ...

随机推荐

  1. tomcat启动出错 invalid LOC header

    tomcat启动出错 invalid LOC header,run as maven test 没有报错,只有警告: 'build.plugins.plugin.version' for org.ap ...

  2. Mac OSX取消Apache(httpd)开机启动(转载)

    启动服务时提示Apache启动失败,80端口被占用.查看进程发现存在几个httpd. OS X自带Apache,可是默认是没有启动的.我也没有开启Web共享,怎么就开机启动了呢? 不知道是不是因为安装 ...

  3. ERP实施顾问--理解客户的解决方案与实际需求

    在企业进行信息化时实施方的顾问都会来现场进行"需求调研",再根据"调研"的结果进行双方确认,确认后按此蓝本进行开发实施. 一切看上去都很美好,需求明确.开发顺利 ...

  4. Code Generation => Table -> Class for DataGridView use

    Generate a class from table defintion and simplify databinding process.

  5. Codeforces 1090M - The Pleasant Walk - [签到水题][2018-2019 Russia Open High School Programming Contest Problem M]

    题目链接:https://codeforces.com/contest/1090/problem/M There are n houses along the road where Anya live ...

  6. RabbitMQ的几个概念

    VHost:虚拟主机,不同的VHost之间完全隔离,互不干扰.类似我们使用VM创建的多个虚拟机.创建好VHost之后需要我们指定其所有者.创建方式:RabbitMQ管理控制台 - Admin → Vi ...

  7. Attention模型

    李宏毅深度学习 https://www.bilibili.com/video/av9770302/?p=8 Generation 生成模型基本结构是这样的, 这个生成模型有个问题是我不能干预数据生成, ...

  8. 可持久化Trie

    ---恢复内容开始--- HAOI 2019 DAY1 T1 我爆零了. 爆零的感觉很难受 原因竟然是我从没犯过的错误 审题不清.情绪低迷. 也许 也许 也许就是想让我知道我有多菜吧. 求前k大的区间 ...

  9. lambda用法

    1.lambda为匿名函数,即不用起函数名2.如果函数使用次数很少并且很简洁,一般可以考虑用lambda函数3.lambda可以简化代码的可读性4.lambda不能使用if for等复杂的语法 示例一 ...

  10. 【Python全栈-后端开发】Django入门基础-2

    Django入门基础知识-2 一 .模版 一.模版的组成 HTML代码+逻辑控制代码 二.逻辑控制代码的组成 1  变量(使用双大括号来引用变量) {{var_name}} 2  标签(tag)的使用 ...