移动端html5 自动生成下拉刷新控件_html5手机列表页面滑动下拉刷新数据

移动APP中很多页面可以下拉实现刷新,在此实现html5版本的下拉刷新控件。

      实现思路：

1.html页面的需要下拉刷新的容器加个类名scrollWrap（任意，和JS中匹配即可）

2.写JS，在上面的容器上动态创建控件（下拉刷新控件，即手机APP中常见到的，下拉后有个加载圈在转，并提示下拉刷新。。）

3.给容器添加touch事件

       实现步骤：

1.html页面如下：

<!--下拉该div,给该div加上class:scrollWrap-->

<div class="container scrollWrap" >

我是正文内容

我是正文内容

</div>

<script type="text/javascript" src="./js/scroll.js"></script>

<script>

window.onload = function(){

var qscroll = new qScroll(refesh);//refresh为回调函数

}

function refresh(){

console.info("刷新页面请求在这里写");

}

</script>

2.js关键代码如下：

var style = document.createElement('style'); 

style.type = 'text/css'; 

style.innerHTML='.loadDiv{margin-top:-60px;text-align: center;position: relative;}此处省略下拉控件的样式‘;

document.getElementsByTagName('HEAD').item(0).appendChild(style);//添加该样式到你的页面

var wrap = document.getElementsByClassName("scrollWrap")[0];

doc.body.insertBefore(div,wrap);////把动态创建的div添加到下拉容器的上面

var qScroll = function(callBack){

var that = this;

that.callBack = callBack;//注册回调函数

that._bind(START_EV,wrap);//绑定touchstart事件

};   

完整代码请下载：http://download.csdn.net/detail/bewhatyouare/8601089