HTML5基于iscroll实现下拉刷新的使用，把更多的

前言

很久以前的一端手机项目需要使用下拉刷新和拉负荷的影响更大，心灵是反映影响微博第一，开始理解有些偏差，即下拉添加数据，而且额外的数据，经查阅发现同事就在下拉刷新最新的数据。拉是附加数据。

使用技巧

1、引用iscroll.js，添加在初始化两事件监听器：touchmove，domcontentloaded。

2、实施的iscroll插件，这是onscrollend事件，调用自己的Ajax方法刷新，在这个事件中添加数据。

3、拉载更多的要求背景相当于寻呼请求数据，此时需要将当前页的索引参数的Ajax请求，并初始化加载需要返回从背景的总页数，这样的前景可以判断。

4，最重要的是实现下拉刷新的方法（pulldownaction）和拉和负载（pullupaction）方法。

运行效果图
实现方法
无功myscroll，
pulldownel，pulldownoffset，
pullupel，pullupoffset，
generatedcount = 0；
*下拉刷新（自定义实现此方法）
* myscroll.refresh（）；在数据加载完成后，调用接口的更新方法
* /
功能pulldownaction（）{
setTimeout（）{（）函数（
李，我；
EL = document.getelementbyid（'thelist）；

对于（i = 0；i < 3；i + +）{
李= document.createelement（李的）；
li.innertext = 'generated行'+（+ + generatedcount）；
el.insertbefore（李，埃尔。子{ 0 }）；
}

（myscroll。刷新）； / /数据加载完成后，调用接口的更新方法
}，1000）；
}
*滚动页面（自定义实现此方法）
*（myscroll。刷新）； / /数据加载完成后，调用接口的更新方法
* /
功能pullupaction（）{
setTimeout（函数）来模拟网络（{ / /拥塞消除setTimeout从生产！
李，我；
EL = document.getelementbyid（'thelist）；

对于（i = 0；i < 3；i + +）{
李= document.createelement（李的）；
li.innertext = 'generated行'+（+ + generatedcount）；
el.appendchild（李，埃尔。子{ 0 }）；
}

（myscroll。刷新）； / /数据加载完成后，调用接口的更新方法
}，1000）；
}
*初始化iscroll控制
* /
函数加载（）{
pulldownel = document.getelementbyid（'pulldown）；
pulldownoffset = pulldownel.offsetheight；
pullupel = document.getelementbyid（'pullup）；
pullupoffset = pullupel.offsetheight；

myscroll =新iscroll（'wrapper，{
ScrollbarClass：'myscrollbar，
usetransition：假，
TopOffset：pulldownoffset，
OnRefresh：函数（）{
如果（pulldownel.classname.match（'loading '））{
pulldownel.classname =；
pulldownel.queryselector（'。pulldownlabel）.innerHTML =下拉刷新…；
} else if（pullupel.classname.match（'loading '））{
pullupel.classname =；
pullupel.queryselector（'。pulluplabel）.innerHTML =拉更多…；
}
}，
OnScrollMove：函数（）{
如果（y = 5）！pulldownel.classname.match（'flip '））{
pulldownel.classname = 'flip；
pulldownel.queryselector（'。pulldownlabel）.innerHTML =松手开始更新；
this.minscrolly = 0；
} else if（这个Y＜5 pulldownel.classname.match（'flip '））{
pulldownel.classname =；
pulldownel.queryselector（'。pulldownlabel）.innerHTML =下拉刷新…；
this.minscrolly = - pulldownoffset；
} else if（这个Y＜（this.maxscrolly - 5）！pullupel.classname.match（'flip '））{
pullupel.classname = 'flip；
pullupel.queryselector（'。pulluplabel）.innerHTML =松手开始更新；
this.maxscrolly = this.maxscrolly；
} else if（这个y >（this.maxscrolly + 5）pullupel.classname.match（'flip '））{
pullupel.classname =；
pullupel.queryselector（'。pulluplabel）.innerHTML =拉更多…；
this.maxscrolly = pullupoffset；
}
}，
OnScrollEnd：函数（）{
如果（pulldownel.classname.match（'flip '））{
pulldownel.classname = 'loading；
pulldownel.queryselector（'。pulldownlabel）.innerHTML =负荷…；
pulldownaction（Ajax）； / /电话
} else if（pullupel.classname.match（'flip '））{
pullupel.classname = 'loading；
pullupel.queryselector（'。pulluplabel）.innerHTML =负荷…；
pullupaction（Ajax）； / /电话
}
}
}）；

setTimeout（function（）{ document.getelementbyid（'wrapper）。style.left = 0；}，800）；
}

/ /初始化绑定iscroll控制
Document.addEventListener（'touchmove功能（e）{ e.preventDefault（）；}，假）；
Document.addEventListener（'domcontentloaded，装，假）；

总结

它主要是在iscroll做一些初始化的操作，为不同的操作显示不同的提示信息，然后写和刷新和负载更多的处理方法下拉拉事件。