swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

使用swiper.js做一些动效时，如果进行了ajax，并且重新把DOM写入到HTML代码中，会导致swiper.js的特效消失的问题、原因是ajax加载后，原先new 的Swiper对象，不认识新来的DOM对象，所以要把ajax之后的DOM也绑定到swiper的事件，就得重新声明Swiper对象，也就是重新声明Swiper对象。

目前有两种解决方法：(第二种方法不成功)

1.在动态获取数据后马上对swiper进行初始化

$.ajax({type:"get",url:finalUrl,dataType:"json",success:function(data){$("#reportList").empty();for(var i=0;i<reportLength;i++){var url="'"+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'";reportHtml+='<div class="swiper-slide report-item" οnclick="reportJump('+url+')">'+'<div class="item-title">'+data.resp[i].title+'</div>'+'<div class="item-content">'+data.resp[i].content+'</div>'+'<div class="item-date">'+data.resp[i].createTime+'</div>'+'</div>';}$("#reportList").append(reportHtml);var swiper = new Swiper('.swiper-container', {slidesPerView : 3});}
});

2.在swiper初始化的时候(不成功)

swiper1 = new Swiper('.swiper-container', {initialSlide :0,observer:true,//修改swiper自己或子元素时，自动初始化swiperobserveParents:true//修改swiper的父元素时，自动初始化swiper
});

转载于:https://www.cnblogs.com/fps2tao/p/9334038.html

swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题相关推荐

爬虫Spider 05 - 代理参数-proxies | 控制台抓包 | requests.post() | 动态加载数据抓取-Ajax
文章目录 Spider 04回顾 requests.get()参数常见的反爬机制及处理方式 Spider 05笔记代理参数-proxies **控制台抓包** **requests.post()参 ...
ajax 技术动态加载数据,jQuery结合Ajax实现动态加载数据【原创】
原先的页面如下: 要实现的效果图: 要实现的效果,就是点击"查看更多"按钮,动态加载五条数据.而点击"查看所有"时数据全部加载. 主要的思路: 1.点击按钮,发 ...
swiper动态加载数据左右切换失效
1.数据加载后进行swiper初始化时 $('.honor .commemorative-medals').on('click', 'li img', function () {var obj = $ ...
python爬虫之Ajax动态加载数据抓取--豆瓣电影/腾讯招聘
动态加载数据抓取-Ajax 特点 1.右键 -> 查看网页源码中没有具体数据 2.滚动鼠标滑轮或其他动作时加载抓取 1.F12打开控制台,页面动作抓取网络数据包 2.抓取json文件URL地址 ...
swiper支持动态加载数据
用swiper插件动态加载数据:动态获取完数据之后,在初始化swiper. 1.在<head>标签里面加入swiper的css和js文件 <link rel="styles ...
解决问题：swiper动态加载图片后无法滑动
解决问题:swiper动态加载图片后无法滑动参考文章: (1)解决问题:swiper动态加载图片后无法滑动 (2)https://www.cnblogs.com/yangguoe/p/9857398 ...
用爬虫抓取动态加载数据丨Python爬虫实战系列(6)
提示:最新Python爬虫资料/代码练习>>戳我直达前言抓取动态加载数据话不多说,开练! 爬虫抓取动态加载数据确定网站类型首先要明确网站的类型,即是动态还是静态.检查方法:右键查 ...
selectpicker 动态加载数据
在做二级下拉菜单动的时候,一般需要动态的给第二个下拉菜单赋值(有时候第一个下拉菜单也是动态加载数据),一般的下拉框的样式比较丑,当使用selectpicker进行下拉菜单美化时,有可能导致下拉菜单加载 ...
HelloChart框架动态加载数据
HelloChart框架动态加载数据之前使用MPAndroidChart做过一个动态加载数据的折线统计图,完成如下功能: 一个动态加载数据的图表,首次进入加载20条,并且视图显示在最右边,然后滑动到 ...

swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题相关推荐

最新文章

热门文章