isscroll插件实现下拉加载上啦刷新转

http://www.jb51.net/article/98394.htm

下面是别人的代码

<!DOCTYPE html>

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

 <meta name="apple-mobile-web-app-capable" content="yes">

 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <title>iScroll 实例：下拉刷新，滚动翻页</title>

<style type="text/css">

* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}  

html {

    -ms-touch-action: none;

}  

body,ul,li {

    padding: 0;

    margin: 0;

    border: 0;

}  

body {

    font-size: 12px;

    font-family: ubuntu, helvetica, arial;

    overflow: hidden; /* this is important to prevent the whole page to bounce */

}  

#header {

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    width: 100%;

    height: 45px;

    line-height: 45px;

    background: #CD235C;

    padding: 0;

    color: #eee;

    font-size: 20px;

    text-align: center;

    font-weight: bold;

}  

#footer {

    position: absolute;

    z-index: 2;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 48px;

    background: #444;

    padding: 0;

    border-top: 1px solid #444;

}  

#wrapper {

    position: absolute;

    z-index: 1;

    top: 45px;

    bottom: 48px;

    left: 0;

    width: 100%;

    background: #ccc;

    overflow: hidden;

}  

#scroller {

    position: absolute;

    z-index: 1;

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    width: 100%;

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-text-size-adjust: none;

    -moz-text-size-adjust: none;

    -ms-text-size-adjust: none;

    -o-text-size-adjust: none;

    text-size-adjust: none;

}  

#scroller ul {

    list-style: none;

    padding: 0;

    margin: 0;

    width: 100%;

    text-align: left;

}  

#scroller li {

    padding: 0 10px;

    height: 40px;

    line-height: 40px;

    border-bottom: 1px solid #ccc;

    border-top: 1px solid #fff;

    background-color: #fafafa;

    font-size: 14px;

}

#pullDown,#pullUp,.pulldown-tips{

    height:40px;

    line-height:40px;

    text-align:center;

}

    .pulldown-tips{

        position:absolute;

        top:-40px;

        left:0;

        width:100%;

    }  

</style>

</head>

<body onload="load()">

    <div id="header">iScroll</div>

    <div id="wrapper">

        <div id="scroller">

        <div id="pullDown" class=""><div class="pullDownLabel"></div></div>

            <div class="pulldown-tips">下拉刷新</div>

            <ul id="list">

                <li>Pretty row 1</li>

                <li>Pretty row 2</li>

                <li>Pretty row 3</li>

                <li>Pretty row 4</li>

                <li>Pretty row 5</li>

                <li>Pretty row 6</li>

                <li>Pretty row 7</li>

                <li>Pretty row 8</li>

                <li>Pretty row 9</li>

                <li>Pretty row 10</li>

                <li>Pretty row 11</li>

                <li>Pretty row 12</li>

                <li>Pretty row 13</li>

                <li>Pretty row 14</li>

                <li>Pretty row 15</li>

                <li>Pretty row 16</li>

                <li>Pretty row 17</li>

                <li>Pretty row 18</li>

                <li>Pretty row 19</li>

                <li>Pretty row 20</li>

            </ul>

            <div id="pullUp" class="">

            <div class="pullUpLabel">加载更多</div>

            </div>

        </div>

    </div>  

    <div id="footer"></div>

    <script type="text/javascript" src="build/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="build/iscroll-probe.js"></script>

    <script type="text/javascript">  

        function load () {

            var myScroll,

                pullDown = $("#pullDown"),

                pullUp = $("#pullUp"),

                pullDownLabel = $(".pullDownLabel"),

                pullUpLabel = $(".pullUpLabel"),

                container = $('#list'),

                loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新  

                pullDown.hide();

                pullUp.hide();  

                myScroll = new IScroll("#wrapper", {

                    scrollbars: true,

                    mouseWheel: false,

                    interactiveScrollbars: true,

                    shrinkScrollbars: 'scale',

                    fadeScrollbars: true,

                    scrollY:true,

                    probeType: 2,

                    bindToWrapper:true

                });

                myScroll.on("scroll",function(){

                    if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){

                        if(this.y > 40){//下拉刷新操作

                            $(".pulldown-tips").hide();

                            pullDown.addClass("refresh").show();

                            pullDownLabel.text("松手刷新数据");

                            loadingStep = 1;

                            myScroll.refresh();

                        }else if(this.y < (this.maxScrollY - 14)){//上拉加载更多

                            pullUp.addClass("refresh").show();

                            pullUpLabel.text("正在载入");

                            loadingStep = 1;

                            pullUpAction();

                        }

                    }

                });

                myScroll.on("scrollEnd",function(){

                    if(loadingStep == 1){

                        if( pullDown.attr("class").match("refresh") ){//下拉刷新操作

                            pullDown.removeClass("refresh").addClass("loading");

                            pullDownLabel.text("正在刷新");

                            loadingStep = 2;

                            pullDownAction();

                        }

                    }

                });  

            function pullDownAction(){

                setTimeout(function(){

                    var li, i;

                    for (i = 0,li = ""; i < 3; i++) {

                        li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";

                    }

                    container.prepend(li);

                    pullDown.attr('class','').hide();

                    myScroll.refresh();

                    loadingStep = 0;

                    $(".pulldown-tips").show();

                },1000);

            }

            function pullUpAction(){

                setTimeout(function(){

                    var li, i;

                    for (i = 0,li = ""; i < 3; i++) {

                        li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";

                    }

                    container.append(li);

                    pullUp.attr('class','').hide();

                    myScroll.refresh();

                    loadingStep = 0;

                },1000);

            }  

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

            }  

    </script>

</body>

</html>

isscroll插件实现下拉加载上啦刷新转的更多相关文章

移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
基于Zepto移动端下拉加载（刷新），上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多今天之前一直没发现有问题贴之前的代码 [self.collectionView reloadData]; [self ...
集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
iscroll5 上拉，下拉加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

随机推荐

超级迷宫之NABCD
模式之一:双人模式 N:基于双人之间的竞争与协作,朋友之间可以有一个竞争比赛,一决高下,男女朋友之间适合双人协作模式,共同完成游戏. A:双人竞争模式为双人同起点或不同起点来进行游戏,在竞争的紧张压力 ...
Thinking in Java & 内部类
静态内部类可以直接创建对象new B.C(); 如果内部类不是静态的,那就得这样 B b = new B(); B.C c = b.new C(); //要想直接创建内部类的对象,不能按照想象的方式, ...
spring时间管理
spring时间管理相比Quartz要简单的多,但功能不如quartz强大 spring.xml的配置 <?xml version="1.0" encoding=" ...
获取字符串中某个指定的子串出现的开始位置(CHARINDEX用法)
CHARINDEX作用写SQL语句我们经常需要判断一个字符串中是否包含另一个字符串,但是SQL SERVER中并没有像C#提供了Contains函数,不过SQL SERVER中提供了一个叫CHAEI ...
通过Get-Group导出组的成员
导出组邮箱的前十个成员,需要注意的是: Get-Group没有Get-GroupMember命令,但是在结果中有一个Members的属性,这个属性包含了所有子成员的对象,用循环将它们列出来即可.有点对 ...
[转帖]PCI-E的部分知识
PCI-E PCI-E全称是PCI Express,是新一代的总线接口.采用了目前业内流行的点对点串行连接,比起PCI以及更早期的计算机总线的共享并行架构,每个设备都有自己的专用连接,不需要向整个总线 ...
[BZOJ2055]80人环游世界有上下界最小费用最大流
2055: 80人环游世界 Time Limit: 10 Sec Memory Limit: 64 MB Description 想必大家都看过成龙大哥的<80天环游世界>,里面 ...
NAT alg 和 ASPF
NAT alg 和 ASPF 参考:https://handbye.cn/719.html 来源:https://www.jianshu.com/p/8a8eb36eef7d NAT的部署已经在企业网 ...
AtCoder Grand Contest 002
AtCoder Grand Contest 002 A - Range Product 翻译告诉你\(a,b\),求\(\prod_{i=a}^b i\)是正数还是负数还是零. 题解什么鬼玩意. ...
模板：CDQ分治
UPD:18.06.15修正一些错误,感谢评论区巨佬orz CDQ分治不是一个顾名思义的东西,CDQ分治是为了纪念神犇陈丹琦而命名的一种算法. 那么CDQ分治能干什么?CDQ分治主要是用来解决一类”操 ...

isscroll插件 实现下拉加载 上啦刷新 转

isscroll插件 实现下拉加载 上啦刷新 转的更多相关文章

随机推荐

热门专题

isscroll插件实现下拉加载上啦刷新转

isscroll插件实现下拉加载上啦刷新转的更多相关文章