文档说明
需要引入的文件
- <script src="js/zepto.min.js"></script>
- <script src="js/dist/dropload.min.js"></script>
- <link rel="stylesheet" href="js/dist/dropload.CSS">
- $('div').dropload({
滑动区域
scrollArea: window,
定义上方样式
- domUp: {
- domClass: "dropload-up",
- domRefresh: '<div class="dropload-refresh">下拉刷新 </div>',
- domUpdate: '<div class="dropload-update">释放更新 </div>',
- domLoad: '<div class="dropload-load"><span class="loading"></span > 刷新中...</div>'
定义下方样式
- domDown: {
- domClass: "dropload-down",
- domRefresh: '<div class="dropload-refresh">上拉加载更多 </div>',
- domLoad: '<div class="dropload-load"><span class="loading"></span > 加载中...</div>',
- domNoData: '<div class="dropload-noData"> 暂无数据 </div>'
- },
是否自动加载
触发 dropload 的最小滑动距离
distance: 50,
提前加载距离
threshold: "",
下拉刷新方法
- loadUpFn: function(me){
- window.reload();
重置 dropload
- me.resetload();
- },
上滑加载更多方法
loadDownFn: function(me){
请求加载数据
$.ajax({
当数据全部请求完时锁定 dropload
- lock(up/down);//up 锁定下拉操作 down 锁定上滑操作 不填全部锁定
- noData(true/false);// 没有更多数据
- });
重置 dropload
- me.resetload();
- }
- });
页面代码
- <script src="js/jquery-2.0.0.min.js"></script>
- <script src="js/zepto.min.js"></script>
- <script src="js/juicer-min.js"></script>
- <script src="js/dist/dropload.min.js"></script>
- <link rel="stylesheet" href="js/dist/dropload.css">
- <div id="topiclist">
- <!-- 模板开始 -->
- <script type="text/juicer" id="TemplateArtOne">
- <div class="huatitle">
- <div class="canyur" style="margin-top:-10px;">
- <div class="canyurl">
- <p style="float:left;">${commentnum+likenum} 人参与 </p>
- </div>
- <div class="canyurr">
- <p>${time}</p>
- </div>
- </div>
- <div class="biaoti">
- <h4>${title}</h4>
- </div>
- <div class="neir">
- <p>$${content}</p>
- </div>
- </div>
- </script>
- <!-- 模板结束 -->
- </div>
- <div id="m4" class="c858"
- style="margin: 10px 0;text-align: center;display:none;"> 网络比较慢, 请重新尝试...</div>
- <div id="m2" class="c858"
- style="margin: 10px 0px; text-align: center; display: none;">
- <img src="img/loading.gif" alt=""> 正在加载...
- </div>
- <div id="m3" class="c858" style="margin: 10px 0px; text-align: center;"> 已加载全部数据 </div>
js 代码
- var page = 0;// 页数
- //dropload
- $('#topiclist').dropload({
- // 滑动区域
- scrollArea : window,
- // 下部样式
- domDown : {
- domClass : 'dropload',
- domRefresh : '<div class="dropload-refresh">上拉加载更多 </div>',
- domUpdate : '<div class="dropload-update">释放加载 </div>',
- domLoad : '<div class="dropload-load"><span class="loading"></span > 加载中...</div>'
- },
- // 下部方法
- loadDownFn : function(me){
- page++;// 页数加 1
- $.ajax({
- url:'topicServlet',
- type:'get',
- dataType:'json',
- data:{"page":page},
- success: function (data) {
- var artlist = data.topicList;
- var len = artlist.length;
- for (var i = 0; i < len; i++) {
- var tpl = document.getElementById('Temp').innerhtml;// 获取模板对象
- var html = juicer(tpl, artlist[i]);// 嵌套
- $("#topiclist").append(html);
- }
- if (len < 20) {// 表示数据全部加载完 (一页 20 条)
- $("#m2").hide();// 隐藏正在加载
- $("#m3").show();// 显示全部加载完
- $("#m4").hide();// 隐藏网络异常
- me.lock();// 锁定上拉下拉操作
- me.noData();// 无数据
- }
- },
- error:function (e) {
- $("#m2").hide();// 隐藏正在加载
- $("#m3").hide();// 隐藏全部加载完
- $("#m4").show();// 显示网络异常
- console.log('错误'+e);
- }
- });//ajax() 方法结束
- setTimeout(function(){
- me.resetload();// 每次数据加载完都要重置 (dropload 的方法)
- },1000);
- }//loadDownFn() 方法结束
- });//dropload() 方法结束
来源: http://www.qdfuns.com/article/39070/cd830143ca4ee235a081e908323d605b.html