iscroll5实现下拉加载更多
2015-09-24 15:22
190 查看
1 下载最新的iscroll5,本文版本是5.1.3
2 提取iscroll-probe.js,选择这个文件的原因是我们要给iscroll扩展一个事件,需要用到probeType 属性
3 修改iscroll-probe.js的源码,添加上拉监听事件slideUp (
iscroll 5 源码注释 http://www.ghugo.com/iscroll-5-source/)
4 编辑页面
Html:
css:
js:
6 如果页面是动态编辑的,则要调用刷新的代码,否则页面不会滚动
lookupScroll.refresh();
2 提取iscroll-probe.js,选择这个文件的原因是我们要给iscroll扩展一个事件,需要用到probeType 属性
3 修改iscroll-probe.js的源码,添加上拉监听事件slideUp (
iscroll 5 源码注释 http://www.ghugo.com/iscroll-5-source/)
4 编辑页面
Html:
"<div id='lookupScrollerWrapper'>"+ "<div>"+ "<div>"+ "<ul data-role='listview' id='assListId0000'></ul>"+ "</div>"+ "<div id='lookupScrollerPullUp' style='display:none'>"+ "<span>上拉加载更多</span>"+ "</div>"+ "</div>"+ "</div>"
css:
#lookupScrollerWrapper { position: absolute; top: 54px; bottom: 0px; width: 100%; overflow: hidden; } #lookupScrollerPullUp { height: 40px; line-height: 40px; font-size: 12px; font-weight: bold; color: grey; text-shadow: none; text-align:center; position:absolute; width:100%; bottom:-40px; }
js:
lookupScroll = new IScroll('#lookupScrollerWrapper', { probeType: 3, mouseWheel: true, click: true }); lookupScroll.on("scroll", function() { if(this.maxScrollY - this.y >= 40){ $("#lookupScrollerPullUp").css("display", ""); } }); lookupScroll.on("slideUp", function() { if(this.maxScrollY - this.y >= 40) { this.scrollTo(0, this.maxScrollY-47, 3000, IScroll.utils.ease.back); $(this)._associateKey(); } }); $('#lookupScrollerWrapper').on('touchmove', function(){ if(lookupScroll.maxScrollY - lookupScroll.y >= 40){ $('#lookupScrollerPullUp').html("释放加载更多"); } }); $('#lookupScrollerWrapper').on('touchend', function(){ if(lookupScroll.maxScrollY - lookupScroll.y >= 40){ $('#lookupScrollerPullUp').html("正在加载.."); } else { $('#lookupScrollerPullUp').html("上拉加载更多"); } });
6 如果页面是动态编辑的,则要调用刷新的代码,否则页面不会滚动
lookupScroll.refresh();
相关文章推荐
- 学习html5的video标签
- Android layout属性大全
- cache的时间长的方法。
- yum提示Another app is currently holding the yum lock; waiting for it to exit...
- 使用Alcatraz来管理Xcode插件
- C++编程中用put输出单个字符和cin输入流的用法
- 第三方推送服务:个推服务推送流程
- 理解OAuth 2.0
- noip2009 靶形数独 (搜索)
- android使用java代码创建控件、布局
- [IOS] 限制TextView文本输入字数包括限制联想词输入
- [error handle][servlet]转发导致的中文乱码
- DLNA DMR实现
- 对角矩阵_分块矩阵
- 如何写angularJS模块
- Python try/except异常处理机制
- JS控制form表单action去向
- H.264(MPEG-4 AVC)级别(Level)、DPB 与 MaxDpbMbs 详解
- unzip 命令 乱码
- .Net魔法堂:提取注释生成API文档