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

随机推荐

Java文件写入时是否覆盖
这个是和服务器读数据结合着来的,是向服务器文件写数据,这就碰到了是否覆盖以前写的数据的问题,看FileWriter();的参数后面的参数名叫append,用词典查是附加的意思,灵机一动,改成false ...
项目Beta冲刺（团队）第七天
1.昨天的困难服务器部署出了问题,本地服务器差点崩掉运行一直闪退,在查找哪里出现问题的路上一去不复返 2.今天解决的进度成员进度陈家权消息功能模块赖晓连问答功能模块雷晶部署服务器到 ...
超实用 1 ArrayList 链表
package ArrayList链表; import java.util.*; public class kk1 { /** * 作者:Mr.Fan * 功能:记住ArrayList链表 */ pu ...
mvc 页面方法学习-RenderBody方法
教程地址:https://docs.microsoft.com/zh-cn/aspnet/mvc/overview/getting-started/introduction/adding-a-view
asp.net登录验证FormsAuthenticationTicket和FormsAuthentication类
登录部分使用的类 FormsAuthentication 为 Web 应用程序管理 Forms 身份验证服务. 配置启用身份验证,WEB.config配置: <system.web> ...
404 Note Found团队-项目UML设计
目录团队信息分工选择课上分工课下分工 ToDolist alpha版本要做的事情燃尽图 UML 用例图状态图活动图类图部署图实例图对象图时序图包图通信图贡献分评定课上贡 ...
订制EditText光标
订制EditText光标设置背景android:background="@null" 设置光标样式:android:textCursorDrawable="@drawa ...
PAT 甲级 1138 Postorder Traversal
https://pintia.cn/problem-sets/994805342720868352/problems/994805345078067200 Suppose that all the k ...
性能测试问题_tomcat占用内存很高，响应速度很慢
Cronolog 1. 问题描述 Tomcat占用服务器内存过大导致访问变慢 2. 问题原因查看catalina.out文件过大,写日志时占用内存过大 3. 解决 ...
Linux限制cpu睿频&限制频率
.关闭睿频 > /sys/devices/system/cpu/intel_pstate/no_turbo .限制CPU最大频率到50% " | sudo tee /sys/devic ...

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

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

随机推荐

热门专题

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

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