使用dragloader.js插件实现上拉加载/下拉刷新.

使用dragloader.js插件实现上拉加载/下拉刷新..

在写代码时候有个需求是，在触屏页面，为了加快页面加载速度，案件列表每页展示5条数据；

然后点击更多，展示下一页数据；

但是为了触屏更好的体验，改为往上滑动案件列表，加载下一页数据；就是要实现上拉加载/下拉刷新的效果；

我只用到了上拉加载；

参考资料：http://blog.****.net/xb12369/article/details/39202711

下面是写的demo：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>touchMove事件使用_下拉加载更多demo</title>

</head>
<style>
.parent {
    height:400px;
    width:100px;
    overflow-y: scroll;
    margin-top: 30px; 
    margin-left: 100px;
}
.child {
    height:50px;
    text-align: center;
    list-style: none;
    background: #ccc;
    border:1px solid #999;
}
</style>
<body>
<div class="parent main" id="list_main">
    <li class="child">a</li>
    <li class="child">b</li>
    <li class="child">c</li>
    <li class="child">d</li>
    <li class="child">e</li>
    <li class="child">f</li>
    <li class="child">g</li>
    <li class="child">h</li>
    <li class="child">i</li>
    <li class="child">j</li>
    <li class="child">k</li>
</div>
<div id="up-refresh" class="new-list-more">  
    <span class="up-refresh-ico"></span>  
    <span class="up-refresh-text" onclick="ajaxChangePage()">向上滑动加载更多数据</span>  
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="dragloader.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">

js代码：

<script type="text/javascript">
$(function(){
    var uprefresh=document.getElementById('up-refresh');  
    var list_main = document.getElementById('list_main');  
    var dragger = new DragLoader(document.getElementsByClassName('main')[0], {  
        dragDownThreshold:60,/*向下滑动区域*/  
        dragUpThreshold:100,/*向上滑动区域*/  
        dragDownRegionCls: 'DownRefresh',/*向下滑动样式*/  
        dragUpRegionCls: 'UpRefresh',/*向上滑动样式*/  
        disableDragDown: true,  

        /*[主要code]向上滑动时的状态显示*/  
        dragUpHelper: function(status) {  
            uprefresh.querySelector('.up-refresh-ico').style.display='none';  
            if (status == 'default') {  
                uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="up-refresh-ico"></span>向上滑动加载更多数据';  
                return '';  
            } else if (status == 'prepare') {  
                uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="up-refresh-ico"></span>松开加载更多数据';  
                return '';  
            } else if (status == 'load') {  
                uprefresh.querySelector('.up-refresh-text').innerHTML = '<span class="loading-img"></span>正在加载中，请稍后...';  
                return '';  
            }  
        }  
    });  
    
    /*
        上拉加载更过立案item;
        由业务功能主动调用reset()接口，以还原状态
        ajax()加载数据完成调用reset()重置drag状态
    */
    dragger.on('dragUpLoad', function() {  
          
        /*备注：此处放置数据刷新的脚本，主要是新闻列表页的 li */
        alert('up刷新');  
        
        var html = "<li class=\"child\">更多</li>";  
        $(".parent.main").append(html);
        dragger.reset(); 
    });      
})
</script>

参考地址：maxzhang/dragloader

dragloader.js是一个面向移动Web开发的JavaScript库，帮助开发者在使用页面原生滚动时，模拟上/下拉手势，实现Pull to Request操作。

关于dragloader.js的一些使用说明：或者api：百度快照：

http://cache.baiducontent.com/c?m=9d78d513d99501fc0dfa950e4a54c0676912da236b968a482182870fd33a541b0120a1ac26510d19918e3a3d5cf3130fbba96132761420c0ca95d7579fa6c8736dd377696d4ac612478d44fc9d1165&p=882a9645d08a52f302a2c7710f0098&newp=8b2a971e9d934eac58ebd428544e82231610db2151d4db1e249f&user=baidu&fm=sc&query=dragUpThreshold&qid=b442ddb60000ca2a&p1=1

dragloader.js上传到资源共享。

使用dragloader.js插件实现上拉加载/下拉刷新.

相关推荐