rinald_未来往事

下拉刷新/上拉加载更多/上滑加载更多-移动端

WEB前端

元素容器
<div class="wrap"></div>

下拉载入更多处理方法

  1. <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
  2. <script>
  3. var page=2;//从第二页请求数据
  4. Zepto(function($){
  5. $(window).scroll(function(){
  6. if(($(window).scrollTop() + $(window).height() > $(document).height()-40)){
  7. ajaxData();
  8. }
  9. });
  10. })
  11. //定义ajax请求数据方法 可以考虑公用
  12. function ajaxData(){
  13. $.get("/mobile/get_list/news/",{page:page},function(result){
  14. var list = '';
  15. var res = JSON.parse(result);//从字符串中解析出json对象
  16. //console.log(res.data);
  17. if(res.code == '200'){ //这里数字200表示接口返回的数据读取正常的状态码
  18. $('#overlist').remove();//移除'已加载完毕'的提示div
  19. for(var i=0;i<res.data.length;i++){//循环组装数据
  20. list += '<div class="item"><a class="cont" href="/mobile/detail/id/'+res.data[i].id+'">'+
  21. '<div class="title">'+res.data[i].title+'</div>'+
  22. '</a></div >';
  23. }
  24. }else{
  25. if($("#overlist").length<=0){//数据请求完毕追加提醒
  26. $('.wrap').append('<div id="overlist">已加载完毕</div>');
  27. }
  28. return false;
  29. }
  30. $('.wrap').append(list);
  31. })
  32. page++;
  33. }
  34. </script>
原文作者:rinald
原文地址:http://fity.cn/post/616.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。