好资源导航 » 文章资讯 » 微信小程序实现移动端滑动分页效果（ajax）

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

2024-02-19 21:51:03 46

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

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

/*
*
*

*/ //判断元素是否进入可视区域 functionsee(objLiLast){ //浏览器可视区域的高度 varsee=document.documentElement.clientHeight; //滚动条滑动的距离 varwinScroll=$(this).scrollTop(); //距离浏览器顶部的 varlastLisee=$(objLiLast).offset().top; returnlastLisee<(see+winScroll)?true:false; } //预设页码为当前第一页 varpage=1; //获得总页码 varpageTotal=parseInt($('#allpage').val()); //是否请求出AJAX的“开关”； varonOff=true; $(window).scroll(function(){ //拖动滚条时，是否发送AJAX的一个“开关” $('.topicBox').each(function(){ //引用最后一个div varlastLi=$('.topicBox:last'); //调用是否进入可视区域函数 varisSee=see(lastLi); if(isSee&&onOff&&page

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐