iscroll5的相对于版本4的变化，以及下拉刷新，上拉更多实例
（1）需要系统学习iscroll5的一些新特性，可以查看iscrollAPI:
中文手册：http://wiki.jikexueyuan.com/project/iscroll-5/ 或 http://www.mamicode.com/info-detail-331827.html
英文手册：http://cubiq.org/iscroll-5
（2）在使用iscroll5的时候，也遇到了一些问题
- 创建iscroll, myScroll = new IScroll('#wrapper', {...}); iscroll4在创建iscroll时是 iscroll=new iScroll('wrapper', {...}); ，版本5与4在创建对象时变化了。
- iscroll5增加了一些新属性，click: true
options.click
为了重写原生滚动条，iScroll禁止了一些默认的浏览器行为，比如鼠标的点击。如果你想你的应用程序响应click事件，那么该设置次属性为true。请注意，建议使用自定义的tap 事件来代替它（见下面）。
默认属性：false
- probeType:3,//像素级的触发scroll事件 我没太看懂官网属性的解释，我测试了一下，probeType: 1时，无法实时响应我的myScroll.on("scroll",function(){...});probeType: 2或3时，myScroll.on("scroll",function(){...});事件都能及时响应。
options.probeType
这个属性是调节在scroll事件触发中探针的活跃度或者频率。有效值有：1, 2, 3。数值越高表示更活跃的探测。探针活跃度越高对CPU的影响就越大。
- probeType: 1 对性能没有影响。scroll事件只有在滚动条不繁忙的时候触发。
- probeType: 2 除了在势能和反弹范围内，将在scroll事件周期内一直执行。这类似于原生的onScroll事件。
- probeType: 3 像素级的触发scroll事件。注意，此时滚动只关注requestAnimationFrame (即：useTransition:false).
- scrollbar滑动时显示，不滑动时影藏 scrollbars: true, interactiveScrollbars: true, shrinkScrollbars: 'scale', fadeScrollbars: true
- 首先列表先要加载完后，才能创建初始化iscroll
- 首先给iscroll一个最小的初始高度，不然高度不填充完，无法下拉刷新
//scroller的min高度
$("#msgList").css("min-height",weinHeight-headerHeight + "px");
- 在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。
//iscroll存在时，销毁iscroll
if(myScroll != undefined){
myScroll.destroy();
myScrollEventBindFlag = true;
}
- preventDefault属性不要轻易使用
options.preventDefault
当事件触发时师傅执行preventDefault()。此属性应该设置为true，除非你真的知道你需要怎么做。
请参考下面的Advanced features中的preventDefaultException，可以获取更多控制preventDefault行为的信息。
默认值：true
<div id="wrapper"> <div id="scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"> <!-- 下拉刷新 --> <div class="showbox" id="downLoading" style="display:block;"> <div class="loadingWord"> <img src="../images/down-vector.png"> <span class="loading_text downRefreshLable">下拉刷新</span> </div> </div> <div id="scroller-content"> <ul id="msgList" style="min-height: 529px;">
<li>1111111111111111111111111111111</li>
<li>2222222222222222222222222222222</li>
<li>3333333333333333333333333333333</li>
<li>4444444444444444444444444444444</li>
<li>5555555555555555555555555555555</li>
<li>6666666666666666666666666666666</li>
<li>7777777777777777777777777777777</li>
<div class="showbox" id="upLoading" style="display:block;">
<div class="loadingWord"><img src="../images/up-vector.png"><span class="loading_text downRefreshLable">上拉更多</span></div>
</div>
</ul> </div> </div> </div>
/** * 创建iscroll,初始化 */ initIScroll : function(){ //iscroll存在时，销毁iscroll if(myScroll != undefined){ myScroll.destroy(); myScrollEventBindFlag = true; } //触发事件标志 var refreshKey = false;// var loadMoreKey = false;// //重置查询开始条数 //searchStartNum = 1; //创建iscroll,初始化 myScroll = new IScroll('#wrapper', { probeType:3,//像素级的触发scroll事件 click: true, scrollbars: true, mouseWheel: true, interactiveScrollbars: true, shrinkScrollbars: 'scale', fadeScrollbars: true }); if(myScrollEventBindFlag){ //绑定后锁死 myScrollEventBindFlag = false; //滑动时触发 myScroll.on("scroll", function(){ var y = this.y; var maxY = this.maxScrollY - y; //console.log("y===" + y + " maxY===" + maxY); if(y >= 40){ $('#downLoading').find('img').animate({ 'transform':'rotate(180deg)', '-ms-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-webkit-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)'},200); $('#downLoading').find('.loading_text').html(eval("msgListLang." + common.sysLang +".pageMessage.relaseRefreshInfo"));//'释放更新' refreshKey = true;//下拉超过40，释放后刷新数据 return ""; }else if(y < 40 && y > 0){ $('#downLoading').find('img').animate({ 'transform':'rotate(-0deg)', '-ms-transform':'rotate(-0deg)', '-moz-transform':'rotate(-0deg)', '-webkit-transform':'rotate(-0deg)', '-o-transform':'rotate(-0deg)'},200); $('#downLoading').find('.loading_text').html(eval("msgListLang." + common.sysLang +".pageMessage.downRefreshInfo"));//'下拉刷新' refreshKey = false;//下拉小于40 return ""; } }); //下滑事件，松手后触发 myScroll.on("slideDown",function(){ if(this.y > 40){ //获取消息列表 searchStartNum = 1; slipUpFalg = false; //刷新数据 MsgList.getMessageListFunction(); //每次完成重置一下 searchStartNum = 1; myScroll.refresh(); } }); //上滑事件，松手后触发 myScroll.on("slideUp",function(){ if(this.maxScrollY - this.y > 40){ //alert("当前滑动所在行") //当前滑动所在行 //myScroll.scrollToElement($('#scroller .js_msgItem').eq(searchStartNum), null, null, true); //自动计算下载所需要的条数 searchStartNum += searchEachAllCount; slipUpFalg = true; //添加数据 MsgList.getMessageListFunction(); myScroll.refresh(); } }); } },
