Simone基于iscroll5的下拉刷新和上拉加载的实现原理
的有关信息介绍如下：
现在手机端网页经常使用下拉刷新、上拉加载更多的效果，在这里介绍一种基于iscroll实现这两种效果的方法，大致思路为添加一个属性值控回弹高度，具体如下。
代码发布出来格式很乱 可复制到到代码编辑器里看
第一步：下载iscroll5官方js文件，使用其中的iscroll-prob.js
第二步：打开iscroll5-prob.js 在iscroll中修改几处的代码
1.function IScroll (el, options)｛｝里加两个属性this.minScrollX = 0;this.minScrollY = 0;［如图1］
2.在iscroll的prototype定义的方法resetPosition里修改一处代码
if ( !this.hasHorizontalScroll || this.x > 0 ) { x = this.minScrollX;//todo ----------0修改而成} else if ( this.x < this.maxScrollX ) { x = this.maxScrollX-this.minScrollX; //todo 修改了-this.minScrollX}if ( !this.hasVerticalScroll || this.y > 0 ) { y = this.minScrollY;//todo ----------0修改而成} else if ( this.y < this.maxScrollY ) { y = this.maxScrollY-this.minScrollY;//todo 修改了-this.minScrollY}，如图2。
这里修改就时为了 页面控制minScrollY 让iscroll重置位置的时候会留一段距离。
3.在iscroll的prototype定义的方法热refresh方法里修改一处代码 重置那两个属性值为0，this.minScrollX = 0;this.minScrollY = 0;如图3.
第三步：页面部分。可以参考官方demo
html：
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 5
- Pretty row 7
- Pretty row 8
- Pretty row 9
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
- Pretty row 10
加了两个div作为下啦 上拉的显示标签，样式丑陋可以自己改。
css部分：参考官方demo
加了些border 看的清楚。。。
scroller 加了min-height:100%和图三里面那个修改＝的一起 便于不满一屏时也可拉动
最后 js部分：
都加了注释：
加载的效果可以根据自己需要变更
