文档dropload.js插件实现webApp网页上滑刷新下拉加载更多
2016-12-24 17:39
681 查看
文档说明
页面代码
js代码
需要引入的文件 <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()方法结束
相关文章推荐
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
- dropload.js实现下滑加载更多分页功能
- jQuery+AJAX实现无刷新下拉加载更多
- thinkphp使用js实现点击加载更多后, 底部无刷新加载出新的数据并显示在该页
- 介绍两款js插件,实现网页顶部线性加载进度条
- js插件dropload上拉下滑加载数据实例解析
- dropload.js+anjular实现的无线下拉。。。。
- 实现官方下拉刷新,增加自动加载更多
- 下拉加载更多DEMO(js实现)
- Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
- Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
- 下拉加载更多DEMO(js实现)
- 安卓,采用最简单易懂的方式实现上拉刷新下拉加载更多
- Android自定义View之快速实现下拉刷新, 点击加载更多ListView
- 下拉刷新、上拉加载更多控件实现原理及解析
- 下拉加载更多DEMO(js实现)
- jquery插件实现图片延迟加载(lazyload.js)
- 仿QQ实现ListView中item的左右滑动同时实现ListView的上拉刷新和下拉加载更多
- jquery插件实现图片延迟加载(lazyload.js)
- jquery插件实现图片延迟加载(lazyload.js)