js 实现无限加载分页(适合移动端)
一、原理:当滚动条到达底部时,执行下一页内容。
判断条件需要理解三个概念:
1.scrollHeight 真实内容的高度
2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的高度
3.scrollTop 视窗上面隐藏掉的部分,即滚动条滚动的距离
思路:
1.使用fixed定位加载框
2.使用$(window).scroll();方法来触发是否加载
3.通过 真实内容高度 - 视窗高度 - 上面隐藏部分 < 5 ,作为加载触发的条件
JavaScript代码:第一种方式
<script type="text/javascript">
var page=2; //当前页的页码
var allpage; //总页码,会从后台获取
var catid="{$catid}";
function showAjax(page){
$.ajax({
url:"",
type:"post",
data:{page:page,catid:catid},
success:function(data){
//要执行的内容
showContent(data);
}
})
}
function scrollFn(){
//真实内容的高度
var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
//视窗的高度
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
//隐藏的高度
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if(pageHeight - viewportHeight - scrollHeight < 50){//如果满足触发条件,执行
showAjax(page);
}
}
function showContent(data){
var list=eval('('+data+')');
var ss='';
for (var i in list) {
ss=ss+'<li><a href="'+list[i]['url']+'">'+list[i]['title']+'</a></li>';
}
$(".minsuList").append(ss);
page++; //页数加1
}
$(window).bind("scroll",scrollFn);//绑定滚动事件
</script>
<script> var catid="6";
var url="/index.php?m=content&c=index&a=ajax_content";
var p=2;
$(window).bind("scroll",function(){
var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
var closeToBottom = $(window).scrollTop() + winHeight > $(document).height() - 50; if(parseInt($("#pages a:nth-last-child(2)").text())<p){
$(".page_loading").html('已经最底部了...');
return false;
}; if(closeToBottom){
ajax_content();
}
}); function ajax_content(){
$.post(url,{catid:catid,p:p},function(res){
tplshow(res);
},"json");
p++;
} function tplshow(res){
var datas=res.lists;
var appendli="";
for(var i=0;i<datas.length;i++){
var data=datas[i];
if(data.title!=""){
appendli+='<li>'+data.title+'</li>'
}
}
var $appendli=$(appendli);
$(".modlenews").append($appendli);
} function timeConver(time){
var time= new Date(parseInt(time));
var hour = time.getHours();
var minute = time.getMinutes();
return [hour,minute].join(':');
}
</script>
二、
$(window).scroll(function () {
//已经滚动到上面的页面高度
var scrollTop = $(this).scrollTop();
//页面高度
var scrollHeight = $(document).height();
//浏览器窗口高度
var windowHeight = $(this).height();
//此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
if (scrollTop + windowHeight == scrollHeight) {
dragThis.insertDom();
}
});
三、js插件
移动端下拉刷新、上拉加载更多插件dropload
js 实现无限加载分页(适合移动端)的更多相关文章
- js实现移动端无限加载分页
原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念: 1.scrollHeight 真实内容的高度 2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...
- Vue.js 开发实践:实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
- 支持无限加载的js图片画廊插件
natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...
- JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)
概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...
- 实现select下拉框的无限加载(懒加载)
在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- jQuery实现无限加载瀑布流特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
随机推荐
- javascript深入理解js闭包【手动加精】
http://www.jb51.net/article/24101.htm 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用 ...
- Using a long as ArrayList index in java
http://stackoverflow.com/questions/459643/using-a-long-as-arraylist-index-in-java http://bbs.csdn.ne ...
- ifconfig配置网络时,出现“SIOCSIFADDR: No such device”
最近刚学习linux,参考教学视频,试着使用ifconfig命令来设置网卡参数,命令为“ifconfig eth0 192.168.11.2”. 但结果显示“SIOCSIFADDR: No such ...
- 【vijos】1790 拓扑编号(拓扑+贪心)
https://vijos.org/p/1790 好神的贪心题.. 一开始我也想到了贪心,但是是错的..sad 就是因为每一个节点的编号与逆图的子树有关,且编号一定是>=子树的儿子+1的.但是想 ...
- Linux初学者学习资料
鸟哥的Linux私房菜 http://vbird.dic.ksu.edu.tw/linux_basic/linux_basic.php
- vue-cli 打包(npm run build) 出现 ERROR in xx..js from UglifyJs Unexpected token: punc (()
之前打包还没问题,这次就报错了,后来发现原来是少了 .babelrc 文件, 网上找了好多方法都不行,后来看了之前的项目,原来是少了 .babelrc 文件, 只要在根目录下建立这个文件, 文件内容 ...
- TF-IDF(词频-逆向文件频率)用于文字分类
SVM分类器:支持向量机Support Vector Machine. 一个普通的SVM就是一条直线,用来完美划分linearly separable的两类.解决线性 要解决非线性需要到高维处理: 核 ...
- 基础-Eclipse 教程
1.Eclipse 是一个开放源代码的.基于 Java 的可扩展开发平台.2.下载地址为: https://www.eclipse.org/downloads/.3.Eclipse 修改字符集 : W ...
- mysql数据库sql优化——子查询优化
1.什么是子查询.表关联查询: 子查询:是指在主sql语句中的select或where子句中使用select查询语句:select a.name,(select b.name from b where ...
- iOS-数组,字典常用的字面量写法
解决方法: //用字面量创建数组 NSArray *array = @[@"one",@"two"]; //用字面量创建字典 NSDictionary *dic ...