直接上代码！！！


<!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. 用javascript写星际飞机大战游戏
			
    在github里看到了个不错的脚本游戏,决定亲自动手来写,效果如下 下面是代码的思路分享 把整个代码理解消化确实不容易,但是如果你坚持看完相信你一定会有收获 如果没兴趣可以直接点击下面的链接 复制代码 ...
    
			
    2. 
						
  2. 挑子学习笔记：两步聚类算法（TwoStep Cluster Algorithm）——改进的BIRCH算法
			
    转载请标明出处:http://www.cnblogs.com/tiaozistudy/p/twostep_cluster_algorithm.html 两步聚类算法是在SPSS Modeler中使用的 ...
    
			
    3. 
						
  3. Android AppBar
			
    AppBar官方文档摘记 2016-6-12 本文摘自Android官方文档,为方便自己及其他开发者朋友阅读. 章节目录为"Develop > Training > Best P ...
    
			
    4. 
						
  4. 开源发布：VS代码段快捷方式及可视化调试快速部署工具
			
    前言: 很久前,我发过两篇文章,分别介绍自定义代码版和可视化调试: 1:Visual Studio 小技巧:自定义代码片断 2:自定义可视化调试工具(Microsoft.VisualStudio.De ...
    
			
    5. 
						
  5. UWP开发：APP之间的数据交互（以微信为例）
			
    目录 说明 UWP应用唤醒方式 跟微信APP交互数据 APP之间交互数据的前提 说明 我们经常看到,在手机上不需要退到桌面,APP之间就可以相互切换,并且可以传递数据.比如我在使用知乎APP的时候,需 ...
    
			
    6. 
						
  6. Sublime Text 全程指引 by Lucida
			
    作者:Lucida 微博:@peng_gong 豆瓣:@figure9 博客园:@figure9 原文链接:http://zh.lucida.me/blog/sublime-text-complete ...
    
			
    7. 
						
  7. CSharpGL(11)用C#直接编写GLSL程序
			
    CSharpGL(11)用C#直接编写GLSL程序 +BIT祝威+悄悄在此留下版了个权的信息说: 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharp ...
    
			
    8. 
						
  8. 微信小程序首次官方分享的纪要
			
    先交代备注: 这次有关小程序的分享只有技术的 QA环节,其他如产品.入口.流量.与公众号的整合等等,回答都是暂时无法给出答案或不确定: 小程序最终发布时间官方也还未确定,不过说应该就是近期: 小程序的 ...
    
			
    9. 
						
  9. TODO：一不顺眼就换字体Go之应用篇
			
    TODO:一不顺眼就换字体Go之应用篇 字体,文字的外在形式特征.就是文字的风格,是文字的外衣.好的字体让人看得舒服,让人更有看.写的欲望哦.2016-11-16 GO官方博客发布了同名Go字体,并没 ...
    
			
    10. 
						
  10. CentOS 搭建openVPN
			
    1.安装前准备 # 关闭selinux setenforce 0 sed -i '/^SELINUX=/c\SELINUX=disabled' /etc/selinux/config # 安装open ...
    
			
    11.