微信小程序实现移动端滑动分页效果(ajax)
程序员文章站
2022-07-05 20:42:57
一般在pc上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。
实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还...
一般在pc上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。
实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面。
/* *<div class='topicbox' id='listbox'> *</div> */ //判断元素是否进入可视区域 function see(objlilast) { //浏览器可视区域的高度 var see = document.documentelement.clientheight; //滚动条滑动的距离 var winscroll = $(this).scrolltop(); //距离浏览器顶部的 var lastlisee = $(objlilast).offset().top; return lastlisee < (see + winscroll) ? true : false; } //预设页码为当前第一页 var page = 1; //获得总页码 var pagetotal = parseint($('#allpage').val()); //是否请求出ajax的“开关”; var onoff = true; $(window).scroll(function () { //拖动滚条时,是否发送ajax的一个“开关” $('.topicbox').each(function () { //引用最后一个div var lastli = $('.topicbox: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, success: function (result) { if (result.status == 'success') { var data = result.result; for (var i = 0; i < data.length; i++) { //to do coding ... }; } //$('#loadnext').hide(); //隐藏正在加载 onoff = true; page ++; } }); } }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。