原因:swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动。
解决方案 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:
var mySwiper = new Swiper ('.swiper-container', {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination',
}, })
解决问题:swiper动态加载图片后无法滑动的更多相关文章
-
ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
-
vue动态加载图片,取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
-
【MFC】picture控件 两种有细微差别的动态加载图片方法
摘自:http://www.jizhuomi.com/software/193.html VS2010/MFC编程入门之二十七(常用控件:图片控件Picture Control) 分类标签: 编程入门 ...
-
Unty3D动态加载图片
试验动态加载图片,代码如下: using UnityEngine; using System.Collections; public class DynamicLoad : MonoBehaviour ...
-
asp.net向后台传参数动态加载图片
//向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...
-
关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
-
vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据
需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...
-
C# 动态加载组件后怎么在开发环境中调试
动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定 ...
-
Unity3D-NGUI动态加载图片
NGUI提供了很方便的UIAtlas,其主要作用是改进DrawCall,把众多图片整合在一张贴图上,由于UNITY3D简单易用的好处,所以只是用原生的GUI很容易忽视DrawCall的问题,所以NGU ...
随机推荐
-
npm 安装不了模块
npm install 不能安装模块 先卸载npm,然后再重新安装 sudo npm uninstall npm -g 如果上面卸载不了,则进入到npm的安装目录(which npm): sudo m ...
-
JavaScript为input/textarea自定义hover,focus效果
<title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...
-
webView中支持input的file的选择和alert弹出
alert()弹出 input的file现选择(特别说明:不同的android版本弹出的样式不同,选择文件后自动上传) webView.setWebChromeClient(new WebChrome ...
-
[Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.4
If $\dim \scrH=3$, then $\dim \otimes^3\scrH =27$, $\dim \wedge^3\scrH =1$ and $\dim \vee^3\scrH =10 ...
-
HDOJ(HDU) 1985 Conversions(汇率转换)
Problem Description Conversion between the metric and English measurement systems is relatively simp ...
-
ASP.Net【如何合并DataTable,并且去重复方法】
虽然DataTable.Merge可以很好的实现,但以下代码写出来更好理解 DataTable DataTable1 = new DataTable(); DataTable DataTable2 = ...
-
BZOJ 1651: [Usaco2006 Feb]Stall Reservations 专用牛棚( 线段树 )
线段树.. -------------------------------------------------------------------------------------- #includ ...
-
Android : Android Studio 更新至gradle 4.10.1后Variants API变化
同步警告: WARNING: API 'variantOutput.getPackageApplication()' is obsolete and has been replaced with 'v ...
-
Swift5 语言指南(七) 集合类型
Swift提供三种主要的集合类型,称为数组,集合和字典,用于存储值集合.数组是有序的值集合.集是唯一值的无序集合.字典是键值关联的无序集合. Swift中的数组,集合和字典总是清楚它们可以存储的值和键 ...
-
leveldb源码分析--日志
我们知道在一个数据库系统中为了保证数据的可靠性,我们都会记录对系统的操作日志.日志的功能就是用来在系统down掉的时候对数据进行恢复,所以日志系统对一个要求可靠性的存储系统是极其重要的.接下来我们分析 ...