首页新闻找找看学习计划

scroll.js插件问题

1
悬赏园豆:10 [待解决问题]

我这个用ajax加载数据他不能上下出现滚动条,手指拉不上去
要是用普通数据就能用

后面大神让我用了这个方法
http://iscrolljs.com/#refresh
我把他放到success里,是可以出现滚动条了但是还是显示不全完,这是怎么回事?


<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title></title> </head> <!--<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />--> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js?v4"></script> <style type="text/css"> body, ul, li { padding: 0; margin: 0; border: 0; } body { font-size: 12px; -webkit-user-select: none; -webkit-text-size-adjust: none; font-family: helvetica; } #scroller ul { position: relative; list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; } #ul1 li { list-style-type: none; width: 30%; float: left; overflow: hidden; margin: 1%; } .header { position: absolute; top: 0; left: 0; width: 100%; height: 45px; line-height: 45px; background-color: #d51875; padding: 0; color: #eee; font-size: 20px; text-align: center; } .footer { position: absolute; height: 40px; background: #777777; line-height: 40px; text-align: center; bottom: 0; left: 0; width: 100%; font-size: 11px; color: #777; display: flex; display: -moz-box; display: -webkit-flex; border-top: 1px solid #ccc; color: #fff; } .footer nav { text-align: center; flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; cursor: pointer; } #wrapper { position: absolute; z-index: 1; top: 45px; bottom: 40px; left: 0; width: 100%; background: #aaa; overflow: auto; } #scroller { position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left; width: 100%; padding: 0; } </style> <script type="text/javascript"> $(function() { document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); var myScroll = new iScroll('wrapper'); $.ajax({ type: "get", url: "https://api.douban.com/v2/book/search?q=javascript&alt=json&callback=fn1&start=1&count=20", cache: false, dataType: "jsonp", jsonpCallback: "fn1", success: function(data) { var odata = data.books; var ohtml = ""; for (var i = 0; i < odata.length; i++) { ohtml += "<li><img src=" + odata[i]["images"]["small"] + "><p>" + odata[i]["title"] + "</p></li>"; } $("#scroller").html("<ul>" + ohtml + "</ul>"); setTimeout(function() { myScroll.refresh();//这里重新渲染页面 }, 0); }, error: function() { alert("出错"); } }); }); </script> <body> <header class="header"> </header> <div id="wrapper"> <div id="scroller"> </div> </div> <footer class="footer"> <nav>新闻</nav> <nav>文章</nav> <nav>科技</nav> <nav>女人</nav> <nav>男人</nav> </footer> </body> </html>
加油吧的主页 加油吧 | 初学一级 | 园豆:56
提问于:2015-10-14 09:46
< >
分享
所有回答(3)
0

你看下你到底前端生成成什么样子了,这种写法是没错的,回调后进行刷新

稳稳的河 | 园豆:4183 (老鸟四级) | 2015-10-14 10:07

解决了是setTimeout不能设为0

支持(0) 反对(0) 加油吧 | 园豆:56 (初学一级) | 2015-10-14 13:37

看来还是不行

支持(0) 反对(1) Mi文 | 园豆:6 (初学一级) | 2015-10-14 14:00

@加油吧: 不加setTimeout不行?

支持(0) 反对(0) 稳稳的河 | 园豆:4183 (老鸟四级) | 2015-10-14 15:57
0

图片还没有加载完就refresh了,两种解决方式:setTimeout(function() { myScroll.refresh();//这里重新渲染页面 }, 500);

将后面的0改成500毫秒,这种方式解决不彻底,取决于你的网速。还有一种方式是等图片加载完成时候执行。

我的博文中:http://www.cnblogs.com/kaisela/p/5049026.html,第6点中的imgLoad.js就是解决这个问题的。

kaisela | 园豆:188 (初学一级) | 2015-12-17 13:13
0

考虑同步ajax,插入数据后,记得refresh()

酸番茄 | 园豆:87 (初学一级) | 2016-01-10 18:47
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册