我就是我

我的天地

移动端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

阅读更多
个人分类: 个人计划与总结
想对作者说点什么? 我来说一句

html5下拉刷新控件

2015年04月16日 3KB 下载

html5下拉刷新和上拉加载更多

2015年07月05日 13KB 下载

h5下拉刷新实现

2015年12月25日 47KB 下载

没有更多推荐了,返回首页

不良信息举报

移动端html5 自动生成下拉刷新控件

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭