微信小程序实现移动端滑动分页效果代码展示
2020-09-28
导读:一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。 实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还...

一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。
实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面。
-
//判断元素是否进入可视区域
-
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 () {
-
//引用最后一个p
-
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 ++;
-
}
-
});
以上就是本文的全部内容,希望对大家的学习有所帮助。
第二部分:如何开通一个小商店
【本站声明】
1、本网站发布的该篇文章,目的在于分享电商知识及传递、交流相关电商信息,以便您学习或了解电商知识,请您不要用于其他用途;
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站,更非本网站提供,与本网站无关,系他人的商品或服务,本网站对于该类商标、标识不拥有任何权利;
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保;
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。