您的位置：首页 > Web前端 > JavaScript

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

2016-05-10 16:19 645 查看

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

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

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

我只用到了上拉加载；

参考资料：http://blog.csdn.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上传到资源共享。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航