首页 > 代码库 > iscroll动态加载数据完美解决方案
iscroll动态加载数据完美解决方案
@{ Layout = null;}<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>iScroll demo: infinite scrolling</title> <script src="http://www.mamicode.com/~/Scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com/~/Scripts/iscroll/build/iscroll-infinite.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new IScroll(‘#wrapper‘, { scrollX: true, scrollY: false, mouseWheel: true, snap: true }); } document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false); $(function () { var w = $(window).width(); $("ul>li").css("width", w); var count = $("ul>li").length; $("#scroller").css("width", w * count); loaded(); myScroll.on(‘scrollEnd‘, function () { count = $("ul>li").length; if (Math.abs(this.x) >= w * (count - 1)) { // do something for (var i = 0; i < 10; i++) { $("ul").append("<li>Cell " + (count+1 + i) + "</li>"); } count = $("ul>li").length; $("#scroller").css("width", w * count); $("ul>li").css("width", w); setTimeout(function () { myScroll.refresh(); myScroll.options.snap = true; }, 10); } }); }); </script> <style type="text/css"> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { -ms-touch-action: none; } body, ul, li { padding: 0; margin: 0; border: 0; } body { font-size: 12px; font-family: ubuntu, helvetica, arial; overflow: hidden; /* this is important to prevent the whole page to bounce */ } #header { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 45px; line-height: 45px; background: #CD235C; padding: 0; color: #eee; font-size: 20px; text-align: center; font-weight: bold; } #footer { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 48px; background: #444; padding: 0; border-top: 1px solid #444; } #wrapper { position: absolute; z-index: 1; top: 45px; bottom: 48px; left: 0; width: 100%; background: #ccc; overflow: hidden; } #scroller { position: absolute; z-index: 1; -webkit-tap-highlight-color: rgba(0,0,0,0); width: 50000px; height: 100%; background-color: #a00; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; } #scroller ul { list-style: none; padding: 0; margin: 0; width: 100%; height: 100%; text-align: center; } #scroller li { display: block; float: left; width: 100px; height: 100%; border-right: 1px solid #ccc; background-color: #fafafa; font-size: 14px; } </style></head><body> <div id="header">iScroll</div> <div id="wrapper"> <div id="scroller"> <ul> <li>Cell 1</li> <li>Cell 2</li> <li>Cell 3</li> <li>Cell 4</li> <li>Cell 5</li> <li>Cell 6</li> <li>Cell 7</li> <li>Cell 8</li> <li>Cell 9</li> <li>Cell 10</li> </ul> </div> </div> <div id="footer"></div></body></html>
iscroll动态加载数据完美解决方案
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。