直接上代码！！！


<!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. VIM教程
			
    vim 的环境设定参数 :set nu :set nonu             就是设定与取消行号啊! :set hlsearch :set nohlsearch     hlsearch 就是  ...
    
			
    2. 
						
  2. mysql join 和left join 对于索引的问题
			
    今天遇到一个left join优化的问题,搞了一下午,中间查了不少资料,对MySQL的查询计划还有查询优化有了更进一步的了解,做一个简单的记录: select c.* from hotel_info_ ...
    
			
    3. 
						
  3. 高薪诚聘熟悉ABP框架的.NET高级开发工程师（2016年7月28日重发）
			
    招聘单位是ABP架构设计交流群(134710707)群主阳铭所在的公司-上海运图贸易有限公司 招聘岗位:.NET高级开发工程师工作地点:上海-普陀区 [公司情况]上海运图贸易有限公司,是由易迅网的创始 ...
    
			
    4. 
						
  4. webpack入门教程之初识loader(二)
			
    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
    
			
    5. 
						
  5. ASP.NET Core 1.1 Preview 1 简介(包含.NETCore 1.1升级公告)
			
    ASP.NET Core 1.1 Preview 1于2016年10月25日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强. 要将现有项目更新到ASP.NET Core 1.1 Pre ...
    
			
    6. 
						
  6. 列属性：RowGUIDCol、Identity 和 not for replication
			
    Table Column有两个特殊的属性RowGUIDCol 和 Identity,用于标记数据列: $ROWGUID 用于引用被属性 RowGUIDCol 标识的UniqueIdentifier 类 ...
    
			
    7. 
						
  7. 【.NET深呼吸】应用上下文（AppContext）
			
    在.net 4.6中新增了一个类,叫AppContext,这个家伙嘛,技术含量不算高,只不过是在编程的时候可以方便用用而已.应用上下文允许定义一个标识(用字符串表示),并且在应用程序运行期间可以切换状 ...
    
			
    8. 
						
  8. Matlab 利用参数方程绘制空心球体
			
    基本原理: 实质为利用球面参数方程,利用网格化数据绘制 x=R*sin(theta)*cos(phi) y=R*sin(theta)*sin(phi) z=R*cos(theta) 绘制函数: fun ...
    
			
    9. 
						
  9. 制作自己的MVC框架（一）——简单粗暴的实现
			
    现在市面上有很多成熟的MVC框架,可以拿来直接用,但自己造一下轮子其实也挺有意思的. 下面先来看个最简单粗暴的MVC实现. 5个文件就能实现最简单的MVC,在Apache中设置一个虚拟目录,配置个简单 ...
    
			
    10. 
						
  10. Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之ORACLE集群概念和原理（二）
			
    ORACLE集群概念和原理(二) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总.然后形成体 ...
    
			
    11.