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 ...

随机推荐

caffe with anaconda
https://blog.csdn.net/u013498583/article/details/74231058 https://www.cnblogs.com/youxin/p/4073703.h ...
eg_5
问题描述:输入两个字符串,从第一字符串中删除第二个字符串中所有的字符. 例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.” ...
springboot maven
更多信息请从官网获取https://docs.spring.io/spring-boot/docs/2.0.1.RELEASE 1.parent基于自己项目而非spring-boot-starter- ...
Appium 服务关键字（转）
来源: https://github.com/appium/appium/blob/master/docs/cn/writing-running-appium/caps.cn.md#appium-服务 ...
Python实现客观赋权法
本文从阐述Python实现客观赋权法的四种方式: 一. 熵权法二. 因子分析权数法(FAM) 三. 主成分分析权数法(PCA) 四. 独立性权系数法 Python实现客观赋权法,在进行赋权前,先导入 ...
java异常处理常见处理
反例之一:丢弃异常结论一:既然捕获了异常,就要对它进行适当的处理.不要捕获异常之后又把它丢弃,不予理睬. 反例之二:不指定具体的异常结论二:在catch语句中尽可能指定具体的异常类型,必要时使用多个 ...
springcloud微服务实战:Eureka+Zuul+Feign/Ribbon+Hystrix Turbine+SpringConfig+sleuth+zipkin
相信现在已经有很多小伙伴已经或者准备使用springcloud微服务了,接下来为大家搭建一个微服务框架,后期可以自己进行扩展.会提供一个小案例: 服务提供者和服务消费者 ,消费者会调用提供者的服务,新 ...
C# Socket模拟发送接收
Socket简介通过TCP/IP与仪器或设备通讯,在C#语言中,我们通常采用Socket.本项目是一个简单的Socket建立服务监听与Socket作为客户端请求的一个示例. 项目结构客户端项目 S ...
BZOJ5302 HAOI2018奇怪的背包（动态规划）
由裴蜀定理,子集S有解当且仅当gcd(S,P)|w. 一个显然的dp是设f[i][j]为前i个数gcd为j的选取方案.注意到这里的gcd一定是P的约数,所以状态数是n√P的.然后可以通过这个得到gcd ...
ava8并发教程：Threads和Executors
原文地址原文作者:Benjamin Winterberg 译者:张坤欢迎阅读我的Java8并发教程的第一部分.这份指南将会以简单易懂的代码示例来教给你如何在Java8中进行并发编程.这是一系列教 ...

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

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

随机推荐

热门专题

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

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