iTakeo

移动端页面下拉刷新。

页面下拉刷新。看过很多下拉刷新的组件，要么通过Iscroll这样的插件完成，要么原生写的并不是很完美，大部分都有点bug。于是~~~尝试写了一个。

DOM结构如下：

<body>
    //内容
</body>01.
02.
03.

如果页面顶部有 fixed 定位元素的话，transform 属性会让fixed失效，所以改为嵌套一层。

<body>
    <section class="wrap">
        //内容
    </section>
</body>01.
02.
03.
04.
05.

调用接口：

var s = new Refresh('body')  //包裹层的id或者class或者body，默认body
//其他方法
s.start(function(){
    //开始加载或者刷新
});
//加载或者失败执行，用与收回提示
s.load();  
s.load(400) //代表加载完成后多久收回提示框，非必要参数，默认400毫秒
s.load(function(){
    //也可以自定义加载成功标语，或者执行其他函数
    this.innerHTML = '加载成功啦啦~'
    //this.innerHTML = '加载失败了~'
},400); //时间放到后面，非必要参数  01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.

比如，如果只需要下拉刷新，可以这么做：

var s = new Refresh();
s.start(function(){
    location.reload(); //执行刷新
});01.
02.
03.
04.

如果需要ajax更新内容，如下：

var s = new Refresh();
s.start(function(){
    //ajax请求
    $.ajax({
        success : function(){
            //ajax成功后执行load
            s.load(400);
        }
    });
}); 01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

点击这里查看DEMO

点击这里下载JS

2016/01/13 2 /

前端

标签: 暂无标签

评论回复

回复 2016/03/09 匿名

😯 😮 😮 😮 😮 😮 😮 😮 😮 😮 ewqe 好！等等
回复 2017/04/08 manicure

WOW just what I was searching for. Came here by searching
for 移动端页面下拉刷新。

回到顶部