微信小程序实现移动端滑动分页效果(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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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
PHP实现抓取HTTPS内容
2014/12/01 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
jquery插件开发注意事项小结
2013/06/04 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
会议接待欢迎词
2014/01/12 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
体育活动总结范文
2014/05/04 职场文书
优秀党支部申报材料
2014/12/24 职场文书
保研推荐信范文
2015/03/25 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书