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>
所有回答(3)
0
你看下你到底前端生成成什么样子了，这种写法是没错的，回调后进行刷新
解决了是setTimeout不能设为0
看来还是不行
@加油吧: 不加setTimeout不行？
0
图片还没有加载完就refresh了，两种解决方式：setTimeout(function() { myScroll.refresh();//这里重新渲染页面 }, 500);
将后面的0改成500毫秒，这种方式解决不彻底，取决于你的网速。还有一种方式是等图片加载完成时候执行。
我的博文中：http://www.cnblogs.com/kaisela/p/5049026.html，第6点中的imgLoad.js就是解决这个问题的。
0
考虑同步ajax，插入数据后，记得refresh()