iScroll下拉加载更多例子
2013-11-20 21:06
204 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>iScroll demo: simple</title> <script type="text/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll = null; var generatedCount = 0; function pullUpAction () { var el, li, i; el = document.getElementById('thelist'); for (i=0; i<3; i++) { li = document.createElement('li'); li.innerText = 'Generated row ' + (++generatedCount); el.appendChild(li, el.childNodes[0]); } myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)! } window.onload = function() { myScroll = new iScroll('wrapper', { onScrollEnd: function () { //如果滑动到底部,则加载更多数据(距离最底部10px高度) if ((this.y - this.maxScrollY) > 10) { pullUpAction(); } } }); for (var n=0; n<10; n++) { pullUpAction(); } } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); </script> <style type="text/css" media="all"> #wrapper1 { height:300px; } #scroller1 li { height:40px; line-height:40px; } </style> </head> <body> <div id="wrapper"> <div id="scroller"> <ul id="thelist"> </ul> </div> </div> </body> </html>
相关文章推荐
- hdu 3097 The Partition of A Graph uva 11396 Claw Decomposition
- leetcode之 Palindrome Partitioning I&II
- hdu2602Bone Collector (简箪01背包)
- C# 操作符重载
- 对于数据库设计者而言,在设计表属性类型时应该考虑哪些问题?
- win7电脑磁盘文件以分组方式展现解决方案
- android 分享功能,实现分享的程序与进行分享信息的代码
- 职责链模式----主界面显示
- 串的反转
- win7电脑磁盘文件以分组方式展现解决方案
- Linux——sed工具
- c++中struct与class的不同
- 计算机视觉的专家和网站
- foxmail 定时发邮件
- 经典C#书籍
- Codeforces 365C - Matrix(hash + yy)
- 测试——设计思维之获取反馈
- C++学习之路(一)
- qt从x86架构移植到arm架构
- s5pv210启动流程简析