您的位置：首页 > 移动开发

移动端下拉刷新、上拉加载更多插件dropload的使用

2017-04-27 11:43 375 查看

github地址：https://github.com/ximan/dropload

github上教程，demo，注意事项都写的很清晰。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/Public/css/dropload.css" >
<title>demo</title>
</head>
<body>
<div class="layout">
<ul id="container">

</ul>
</div>
<script src="/Public/ljz/js/jquery.js"></script>
<script src="/Public/ljz/js/dropload.min.js"></script>
<script src="/Public/ljz/js/template.js"></script>

<script type="text/html" id="temp">
{{if data}}
{{each data as di i}}
<li class="construct" >
<p>**单位：{{di.dw}}</p>
</li>
{{/each}}
{{/if}}
</script>
<script>
$(function () {
var rows = 10;
var page = 1;
$('.layout').dropload({
loadDownFn: function (dl) {
$.get('/demo/list', {
page: page,
rows: rows
}, function (data) {
var d = $.parseJSON(data);
if (d.result == 1) {
if (d.data && d.data.length > 0) {
page++;
var lis = template("temp", d);//template.js模板返回的html
$('#container').append(lis);
} else {
dl.lock();//没有数据以后锁定
dl.noData(true);//标明没有数据了
}
}

dl.resetload();//不管成功失败，都要重置刷新  header footer
});

}
});
});
</script>
</body>
</html>

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

标签： 下拉刷新上拉加载自动加载更多移动端 dropload html

相关文章推荐

新的分享

章节导航