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


Posted in Javascript onJune 13, 2017

一般在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 ++;
}
});

}
});
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
基于javascript编写简单日历
May 02 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
详解小程序云开发数据库
May 20 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 #Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 #Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 #Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php变量作用域的深入解析
2013/06/03 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP开发注意事项总结
2015/02/04 PHP
代码生成器 document.write()
2007/04/15 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
wxPython色环电阻计算器
2019/11/18 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
工作个人的自我评价
2014/01/14 职场文书
关于运动会的口号
2014/06/07 职场文书
安全员岗位职责
2015/02/10 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
市场营销计划书
2019/04/24 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
java如何实现socket连接方法封装
2021/09/25 Java/Android
Redis+AOP+自定义注解实现限流
2022/06/28 Redis