小程序模板网

微信小程序实现移动端滑动分页效果(ajax)

一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。

实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面。

 

				
  1. /*
  2. *<div class='topicBox' id='listBox'>
  3. *</div>
  4. */
  5.  
  6.  
  7. //判断元素是否进入可视区域
  8. function see(objLiLast) {
  9. //浏览器可视区域的高度
  10. var see = document.documentElement.clientHeight;
  11. //滚动条滑动的距离
  12. var winScroll = $(this).scrollTop();
  13. //距离浏览器顶部的
  14. var lastLisee = $(objLiLast).offset().top;
  15. return lastLisee < (see + winScroll) ? true : false;
  16. }
  17. //预设页码为当前第一页
  18. var page = 1;
  19. //获得总页码
  20. var pageTotal = parseInt($('#allpage').val());
  21. //是否请求出AJAX的“开关”;
  22. var onOff = true;
  23. $(window).scroll(function () {
  24. //拖动滚条时,是否发送AJAX的一个“开关”
  25. $('.topicBox').each(function () {
  26. //引用最后一个div
  27. var lastLi = $('.topicBox:last');
  28. //调用是否进入可视区域函数
  29. var isSee = see(lastLi);
  30. if (isSee && onOff && page < pageTotal) {//最底部元素可见,开关开启而且还有下拉
  31. //$('#loadNext').show(); //显示正在加载图标
  32. onOff = false;
  33. $.ajax({
  34. url: '/GetPageData',
  35. type: 'GET',
  36. dataType: 'json',
  37. data: {
  38. page: page+1
  39. },
  40. asyc: false,
  41. success: function (result) {
  42. if (result.status == 'success') {
  43. var data = result.result;
  44. for (var i = 0; i < data.length; i++) {
  45. //to do coding ...
  46. };
  47. }
  48. //$('#loadNext').hide(); //隐藏正在加载
  49. onOff = true;
  50. page ++;
  51. }
  52. });
  53.  
  54. }
  55. });
  56. });


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23790.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询