直接上代码！！！


<!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. Windows Server 2008 R2 下配置TLS1.2，添加自签名证书
			
    前言 2017年1月1日起App Store上的所有App应用将强制开启ATS功能. 苹果的ATS(App Transport Security)对服务器硬性3点要求: ① ATS要求TLS1.2或者 ...
    
			
    2. 
						
  2. WebAPI 2参数绑定方法
			
    简单类型参数 Example 1: Sending a simple parameter in the Url [RoutePrefix("api/values")] public ...
    
			
    3. 
						
  3. 《Walking the callstack（转载）》
			
    本文转载自:https://www.codeproject.com/articles/11132/walking-the-callstack Download demo project with so ...
    
			
    4. 
						
  4. 转: 如何高效利用GitHub
			
    注:写了很多使用哲学,有意思 from: http://www.yangzhiping.com/tech/github.html
    
			
    5. 
						
  5. 【腾讯Bugly干货分享】跨平台 ListView 性能优化
			
    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/FbiSLPxFdGqJ00WgpJ94yw 导语 精 ...
    
			
    6. 
						
  6. 详解this
			
    this 虐我千百遍,看完此文效立见!不得不说,这篇文章的总结很地道很全面,适合收藏之用. 原文:all this 习惯了高级语言的你或许觉得JavaScript中的this跟Java这些面向对象语言 ...
    
			
    7. 
						
  7. Entity Framework 6 Recipes 2nd Edition（10-1）译->非Code Frist方式返回一个实体集合
			
    存储过程 存储过程一直存在于任何一种关系型数据库中,如微软的SQL Server.存储过程是包含在数据库中的一些代码,通常为数据执行一些操作,它能为数据密集型计算提高性能,也能执行一些为业务逻辑. 当 ...
    
			
    8. 
						
  8. Html5 Json应用
			
    本文主要说明Json的基本概念,和一个在Html中使用Json给元素赋值的小例子,属于基础性信息 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Obj ...
    
			
    9. 
						
  9. atitit.软件与sql设计模式原理与本质 大总结attialx总结v6 qc26.docx
			
    atitit.软件与sql设计模式原理与本质 大总结attialx总结v6 qc26.docx 1.1. 版本历史2 2. 设计模式是什么2 2.1. 模式就是在一种场合下对某个问题的一个解决方案.& ...
    
			
    10. 
						
  10. Atitit ABI FFI 的区别与联系 attilax总结
			
    Atitit ABI FFI 的区别与联系 attilax总结 FFI stands for Foreign Function Interface. A foreign function interf ...
    
			
    11.