直接上代码！！！


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        #wrapper {
            width: 100%;
        }

        .up, .down, li {
            height: 49px;
            line-height: 49px;
            text-align: center;
        }

        .up {
            display: none;
            background-color: darkgrey;
            color:#ffffff;
            border-bottom: 1px solid lightgrey;
        }

        .down {
            display: none;
            background-color: darkgrey;
            color: #ffffff;
        }

        li {
            background-color: darkgrey;
            border-bottom: 1px solid lightgrey;
        }

        #wrapper {
            position: relative;
            height: 500px;
            background: #aaa;
            overflow: hidden; /*iscroll不能设置overflow为auto*/
        }

        #scroller {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        .iScrollVerticalScrollbar {
            /*设置凹槽的样式*/
            position: absolute;
            z-index: 10;
            width: 5px;
            top: 0;
            right: 0;
            overflow: hidden;
            height: 100%;
            border-radius: 10px;
        }

        .iScrollIndicator {
            /*设置滚动条的样式*/
            width: 100%;
            background: orange;
            border-radius: 10px;
            height: 30%;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <div class="up" id="up">下拉刷新</div>
        <ul class="list" id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>
        <div class="down" id="down">上拉加载更多</div>
    </div>
</div>
<script type="text/javascript" src="iscroll5.js"></script>
<script type="text/javascript" src="iscroll-probe.js"></script>

<script type="text/javascript">

    function load() {
        var myScroll = new IScroll("#wrapper", {
            useTransition: true,
            useTransform: true,
            mouseWheel: true,
            scrollbars: "custom",//只有该属性的值为"custom"，才能通过.iScrollVerticalScrollbar和.iScrollIndicator设置凹槽和滚动条的样式
            interactiveScrollbars: true,
            resizeScrollbars: false,//当这个属性设置为否时,才可以通过.iScrollIndicator改变滚动条(不是凹槽的的宽和高）
            probeType: 3//这个值设置为3而且必须引入iscroll-probe.js才能触发onscroll事件
        });

        var down = document.getElementById("down");
        var up = document.getElementById("up");
        var scroller = document.getElementById("scroller");
        var list = document.getElementById("list");
        var step = 3;//上拉加载时的动态创建的li的个数
        var max = 30;//li的最大个数
        var flag = false;//滚动条滚动到最底部的标识
        var end = false;//数据加载完成后的标识

        myScroll.on("scroll", function () {
            if (parseInt(this.y) >= 0 && this.directionY == -1) {//down
                up.style.display = "block";
                if (parseInt(this.y) == 0) {
                    up.style.display = "none";
                    this.refresh();
                }
            }
            if (parseInt(this.y) == this.maxScrollY) {
                if (end) {
                    return;
                }
                var self = this;
                setTimeout(function () {
                    down.style.display = "block";
                    self.y -= (list.children[0].clientHeight) * step;
                    self.refresh();
                    flag = true;
                    if (list.children.length == max) {
                        down.innerHTML = "没有更多数据";
                        flag = false;
                        setTimeout(function () {
                            down.style.display = "none";
                            self.refresh();//为了解决 down.style.display = "none";之后最下面有一行空白；
                            end = true;
                        }, 2000)
                    }
                }, 1000);

            }
            if (flag && this.directionY == 1 && this.y < this.maxScrollY) {
                if (end) {
                    return;
                }
                flag = false;
                down.style.display = "none";
                var fragment = document.createDocumentFragment();
                var len = list.children.length;//每次上拉时动态获取当前li的总个数
                var num = max - len;//最大个数和总个数的差值
                step = num <= step && num >= 0 ? num : step;//当两个数的差值大于等于0小于等于step的时候，step等于两者之差，否则step不变
                for (var i = 0; i < step; i++) {
                    var li = document.createElement("li");
                    li.innerHTML = list.children.length + i + 1;
                    fragment.appendChild(li);
                }
                list.appendChild(fragment);
            }
        });
    }
    window.addEventListener("load", load, false);
</script>
</body>
</html>



关于iscroll5的相关属性和方法，请参考http://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
												


											
iscroll5实现一个下拉刷新上拉加载的效果的更多相关文章
	

    
						
  1. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
		
    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
    
		
    2. 
						
  2. SwipeRefreshLayout实现下拉刷新上滑加载
		
    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
    
		
    3. 
						
  3. 移动端下拉刷新上拉加载-mescroll.js插件
		
    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
    
		
    4. 
						
  4. JS+CSS实现的下拉刷新/上拉加载插件
		
    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
    
		
    5. 
						
  5. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
		
    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
    
		
    6. 
						
  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
		
    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
    
		
    7. 
						
  7. ListView下拉刷新上拉加载更多实现
		
    这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...
    
		
    8. 
						
  8. RecyclerView下拉刷新上拉加载（三）—对Adapter的封装
		
    RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...
    
		
    9. 
						
  9. RecyclerView下拉刷新上拉加载（一）
		
    listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩 ...
    
		
    10. 
						
  10. listview下拉刷新上拉加载扩展（二）-仿美团外卖
		
    经过前几篇的listview下拉刷新上拉加载讲解,相信你对其实现机制有了一个深刻的认识了吧,那么这篇文章我们来实现一个高级的listview下拉刷新上拉加载-仿新版美团外卖的袋鼠动画: 项目结构: 是 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 闭区间套定理（Nested intervals theorem）
			
    ① ②这里用到了极限与不等关系 ③如果a≠b,那么便不会有$\lim _{n\rightarrow \infty }\left| I_n \right| =0$ ④如果还存在一点c在内,那么同样也不会 ...
    
			
    2. 
						
  2. .NET跨平台之旅：将示例站点升级至 .NET Core 1.1 Preview 1
			
    今天微软发布了 .NET Core 1.1 Preview 1(详见 Announcing .NET Core 1.1 Preview 1 ),紧跟 .NET Core 前进的步伐,我们将示例站点 h ...
    
			
    3. 
						
  3. Linux学习日记(二)
			
    在linux上运行.Net程序 并安装Linux网站 一.环境 ubuntu14.10(桌面版 官网下载的最新版) jexus5.6.3 正式版 MonoDevloper (安装完后里面有个Ubunt ...
    
			
    4. 
						
  4. 保护ASP.NET 应用免受 CSRF 攻击
			
    CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/ ...
    
			
    5. 
						
  5. 解决Windows 8.1中所有的应用(Modern App)无法打开（闪退）的问题
			
    我已经在3台电脑上遇到这个问题了,症状是,所有应用商店安装的App都无法打开,包括应用商店本身,在开始界面点击应用以后,应用的Logo一闪而过,然后就消失了,回到了开始界面.查看系统应用日志,会有这样 ...
    
			
    6. 
						
  6. 【完全开源】知乎日报UWP版（下篇）：商店APP、github源码、功能说明。Windows APP 良心出品。
			
    目录 说明 功能 截图+视频 关于源码和声明 说明 陆陆续续大概花了一个月的时间,APP算是基本完成了.12月份一直在外出差,在出差期间进行了两次功能完善,然后断断续续修补了一些bug,到目前为止,我 ...
    
			
    7. 
						
  7. Rxjava cold/hot Observable
			
    create Observable分为cold以及hot两种,cold主要是静态的,每次subscribe都是从头开始互不干扰,而hot的在同一时刻获得的值是一致的 cold Observable 使 ...
    
			
    8. 
						
  8. 在网上摘录一段对于IOC的解析，比较直观，大家观摩观摩
			
    其实IoC非常简单,基本思想就是面向接口的编程,只是老外给起了个名字名充分利用之. 简单的说,传统模式下,如果你要用钱,你需要去银行取,IoC模式下,银联在你家安了一个取款机,你直接找取款机要钱就可以 ...
    
			
    9. 
						
  9. 2016年8月ios面试问题总结
			
    1.app分发方式 所谓分发方式简单点讲就是你的app都可以通过哪些途径给用户使用. a:个人或者公司的开发者账号 可以上传appStore,用户通过appStore下载. b:企业账号:打包分发.  ...
    
			
    10. 
						
  10. <JavaScript语言精粹>--<读书笔记三>之replace()与正则
			
    今天有人问我repalce(),他那个题目很有意思.我也不会做,于是我就去查,结果发现就是最基础的知识的延伸. 所以啊最基础的知识才是很重要的,千万不能忽略,抓起JS就写代码完全不知到所以然,只知道写 ...
    
			
    11.