微信小程序实现移动端滑动分页效果代码展示

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

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

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

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