微信小程序实现移动端滑动分页效果(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实现动态菜单添加的实例代码
Jul 05 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
js实现3D旋转相册
Aug 02 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实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
php常用的工具开发整理
2019/09/26 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python中map、any、all函数用法分析
2015/04/21 Python
快速了解Python中的装饰器
2018/01/11 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python的形参和实参使用方式
2019/12/24 Python
django API 中接口的互相调用实例
2020/04/01 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python接口自动化测试的实现
2020/08/28 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2014年收银工作总结
2014/11/13 职场文书
导游词300字
2015/02/13 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
Python开发五子棋小游戏
2022/04/28 Python