swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
2023-09-11 14:19:38 时间
使用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+"¬iceId="+reportList[i].id+"'"; reportHtml+='<div class="swiper-slide report-item" onclick="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自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper });
相关文章
- js 逆向分析的神器 --- v_jstools
- 【面试】吃透了这些Redis知识点,面试官一定觉得你很NB(干货 | 建议珍藏) c#自定义Attribute获取接口实现 纯JS ajax 聊聊DataTable下载 二进制数据的序列化反序列化和Json的序列化反序列化的重要区别
- MVC之Ajax.BeginForm使用详解之更新列表 mvc验证jquery.unobtrusive-ajax
- 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等) 图片放大镜 JavaScript-基础 用javascript写原生ajax(笔记) 初遇 Asp.net MVC 数据库依赖缓存那些事儿 前端JS 与 后台C# 之间JSON序列化与反序列化(笔记)
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- jquery.form.js实现将form提交转为ajax方式提交的方法
- 【JS】js创建Object对象和构造函数的多种方法(综合示例)
- 爬虫之JS的解析确定js的位置
- JavaScript - PC 端通过纯 js 播放音频文件(播放提示音)
- (5)打鸡儿教你Vue.js
- JS fetch()用法详解
- JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)
- js跨越小结
- JS教程之使用 P5.js 构建一个贪吃蛇游戏(教程含源码)
- JS高阶---对象创建模式(5种)
- GitHub 如何基於 Node.js 和 Chromium 開發 Atom?
- 关于 ajax 动态返回数据 css 以及 js 失效问题
- 解决AJAX跨域:1、利用JSONP;2、JS设置Header
- 【Laya + TS + JS】SheetJS(js-xlsx)前端生成Excel表格
- JS基础深入总结
- JS魔法堂:函数节流(throttle)与函数去抖(debounce)
- Fundebug后端Node.js插件更新至0.2.0,支持监控Express慢请求
- JS 数组相关的操作函数
- Ajax.BeginForm()实现ajax无刷新提交
- 原生js实现的ajax请求
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
- js-原生Js汉语拼音首字母匹配城市名
- Three.js Example 注解 —— canvas_geometry_cube.html