利用scroll的局部刷新功能..docx

局部刷新iscroll控件的具体使用（下拉刷新，上拉加载更多）（1）引用iscroll的js文件以及css文件，注意一定要引用css文件，否则将会出现不能拖动的问题。（2）页面配置：将所要刷新的内容放到div id=wrapper及div id=scroller标签下，这是调用iscroll的必要条件，否则会出现不能刷新或者不能滑动页面的情况。此外还有商量刷新及下拉刷新的标签，在iscroll中有这两个标签的样式，若不想用默认的样式，也可通过覆盖的方式添加其他样式，此处用默认样式。当页面内容超过当前页面显示区域时，iscroll将会自动出现滚动条，额外的要设置wrapper的css样式为position:absolute,否则将出现不能拖动问题。div id=wrapper style=margin-bottom: 0px;div id=scrollerdiv id=pullDown span class=pullDownIcon/spanspan class=pullDownLabel下拉刷新.../span/divdiv class=list mt15刷新内容/divdiv id=pullUp align=center style=display: none span class=pullUpIcon/spanspan class=pullUpLabel上拉加载更多.../span /div/div/div（3）js相关配置①创建列表function createHtml(list){}var myScroll, pullUpEl,pullDownOffset, pullUpOffset,generatedCount = 0;var page = 1;var hasNew=true;②初始化iScroll控件Loaded()定义iscroll的刷新动作，上拉加载更多，下拉刷新列表，若没有更多数据将提示“加载完成，没有更多记录”，myScroll = new iScroll(),设置iscroll的基本属性，当手动滑动iscroll屏幕时，如果当前纵坐标大于5时，证明向下滑动，所以将提示“下拉刷新”，并且滑动完将纵坐标置为0，即回到顶部。当纵坐标大于最大的纵坐标+5时，说明正在向下滑动，将提示“下拉加载更多“；当滑动结束将判断是上拉还是下拉确定是否执行加载下一页数据还是刷新列表回到第一页。function loaded() { pullDownEl = document.getElementById(pullDown); pullDownOffset = pullDownEl.offsetHeight; pullUpEl = document.getElementById(pullUp); pullUpOffset = pullUpEl.offsetHeight; myScroll = new iScroll( wrapper, { scrollbarClass : myScrollbar, //重要样式 useTransition : false, topOffset : pullDownOffset, onRefresh : function() {上拉加载更多...; }, onScrollMove : function() { if (this.y 5 松手开始更新...; this.minScrollY = 0; } else if (this.y (this.maxScrollY - 5) 松手开始更新...;this.maxScrollY = this.maxScrollY; } else if (this.y (this.maxScrollY + 5) 上拉加载更多...; this.maxScrollY = pullUpOffset; } }, onScr