用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序开发联盟 首页 教程 查看内容

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

Rolan 2017-6-14 00:35

这篇文章主要为大家详细介绍了微信小程序实现移动端滑动分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: PHP急先锋 来自: 脚本之家

相关阅读