微信小程序实现移动端滑动分页效果(ajax)
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现移动端滑动分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。
实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面。
/* *<div class='icBox' id='listBox'> *</div> */ //判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see = document.documentElement.clientHeight; //滚动条滑动的距离 var winScroll = $(this).scrollTop(); //距离浏览器顶部的 var lastLisee = $(objLiLast).offset().; return lastLisee < (see + winScroll) ? true : false; } //预设页码为当前第一页 var page = 1; //获得总页码 var pageTotal = parseInt($('#allpage').val()); //是否请求出AJAX的“开关”; var onOff = true; $(window).scroll(function () { //拖动滚条时,是否发送AJAX的一个“开关” $('.icBox').each(function () { //引用最后一个div var lastLi = $('.icBox:last'); //调用是否进入可视区域函数 var isSee = see(lastLi); if (isSee && onOff && page < pageTotal) {//最底部元素可见,开关开启而且还有下拉 //$('#loadNext').show(); //显示正在加载图标 onOff = false; $.ajax({ url: '/GetPageData', type: 'GET', dataType: 'json', data: { page: page+1 }, asyc: false, suess: function (result) { if (result.status == 'suess') { var data = result.result; for (var i = 0; i < data.length; i++) { //to do coding ... }; } //$('#loadNext').hide(); //隐藏正在加载 onOff = true; page ++; } }); } }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程