直接上代码！！！


<!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. MySQL数据库罕见的BUG——Can't get hostname for your address
			
    在连接mysql jdbc时候,抛出了 com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Communicat ...
    
			
    2. 
						
  2. Linux下的C Socket编程 -- server端的继续研究
			
    Linux下的C Socket编程(四) 延长server的生命周期 在前面的一个个例子中,server在处理完一个连接后便会立即结束掉自己,然而这种server并不科学啊,server应该是能够一直 ...
    
			
    3. 
						
  3. hibernate-mapping-3.0.dtd；hibernate-configuration-3.0.dtd；hibernate.properties所在路径
			
    hibernate-mapping-3.0.dtd 所在路径:hibernate-release-5.2.5.Final\project\hibernate-core\src\main\resourc ...
    
			
    4. 
						
  4. [PHP源码阅读]trim、rtrim、ltrim函数
			
    trim系列函数是用于去除字符串中首尾的空格或其他字符.ltrim函数只去除掉字符串首部的字符,rtrim函数只去除字符串尾部的字符. 我在github有对PHP源码更详细的注解.感兴趣的可以围观一下 ...
    
			
    5. 
						
  5. Spring7：基于注解的Spring MVC（下篇）
			
    Model 上一篇文章<Spring6:基于注解的Spring MVC(上篇)>,讲了Spring MVC环境搭建.@RequestMapping以及参数绑定,这是Spring MVC中最 ...
    
			
    6. 
						
  6. Leetcode 笔记 36 - Sudoku Solver
			
    题目链接:Sudoku Solver | LeetCode OJ Write a program to solve a Sudoku puzzle by filling the empty cells ...
    
			
    7. 
						
  7. Oracle11g CentOS7安装记录
			
    1. 操作系统环境.安装包准备 宿主机:Max OSX 10.10.5 虚拟机:Parallel Desktop 10.1.1 虚拟机操作系统:CentOS-7-x86_64-DVD-1511.iso ...
    
			
    8. 
						
  8. 解析大型.NET ERP系统 自动更新
			
    C/S架构的应用程序需要支持自动更新功能,当新版本程序发布后,正在运行的客户端能检测到新版本的程序,通知用户是否下载更新.工作以来参与过几个自动更新模块的设计与维护,撰文总结自动更新模块设计与实现.  ...
    
			
    9. 
						
  9. jQuery系列：Ajax
			
    1. load(url, [data], [callback]) 1.1 解析 载入远程 HTML 文件代码并插入至 DOM 中. 语法格式: load(url, [data], [callback] ...
    
			
    10. 
						
  10. 让DIV中文字换行显示
			
    1. <style> div { white-space:normal; word-break:break-all; word-wrap:break-word; } </style& ...
    
			
    11.