下拉加载下一页

<script>
var page=2;
var finished=0;
$(document).ready(function(){
	var range = 1; //距下边界长度/单位px
	var pages = $("#listPages").val();
	var totalheight = 0;
	var main = $("#loadList"); //主体元素
	$(window).scroll(function(){
		var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
		totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
		if(finished == 0){
			if(($(document).height()-range) < totalheight) {
				finished=1;
				if(page < pages || page == pages){
					nextPage(page);
					page++;
				}else{
					$(‘#loading‘).remove();
					$(‘#loadList‘).append(‘<a href="javascript:;" class="clear loadMoreBtn">Duang~到底了</a>‘);
				}
			}
		}
	});

});

function nextPage(page)
{
	$.ajax({
         url:‘{url:/college/college_newlist_ajax}‘,
         type:‘POST‘,
         data:"num="+page+"&top=1",
         dataType:‘json‘,
         success:function(json){
			 if(json.error_code > 0)
			 {
				alert(json.error_msg);
				return;
			 }
			 if(typeof json == ‘object‘){
				var commentHtml = ‘‘;
				for(var item in json.data)
				{
					if(json.data[item][‘attribute‘] == ‘v‘){
						commentHtml += template.render(‘videoTemplate‘,json.data[item]);;
					}else if(json.data[item][‘thumb_img_number‘] > 1){
						commentHtml += template.render(‘moreTemplate‘,json.data[item]);
					}else{
						commentHtml += template.render(‘oneTemplate‘,json.data[item]);
					}

				}
				commentHtml+=‘<a id="loading" href="javascript:;" class="clear loadMoreBtn">加载中...</a>‘;
				$(‘#loadList‘).append(commentHtml);
				$(‘#loading‘).remove();
				finished=0;
			 }

         }
     });

}
</script>

  

时间: 2024-10-15 15:26:26

下拉加载下一页的相关文章

listview上拉加载上一页 下拉加载下一页共通处理

先什么都不说了,上效果图: 第一页默认显示: 上拉加载下一页: 拉至一定高度: 松开 加载中: 下拉加载上一页: 下拉至一定高度: 松开 加载中: 代码已经上传:http://download.csdn.net/detail/zengchao2013/8837971 共通的header和footer可以直接使用. 需要传入的三个参数:是否是第一页,是否是最后一页,当前页数 用于header和footer的UI显示,第一页header隐藏,最后一页footer隐藏.

JQuery实现无刷新下拉加载图片

      最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQuery写下拉触发ajax事件 $(window).scroll(function () { if($(window).scrollTop()==($(document).height()-$(window).height()))//判断右边滑动条是否滑到最下 { $.ajax({ url:"&quo

iscroll5 上拉,下拉 加载数据

我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余正常. 4.只要页面没有 <div id="pullDown"> <div class="pullDownLabel">正在加载中...</div> </div> 这段代码就不会执行下拉加载数据.//没有上拉时候用到的ht

H5页面下拉加载更多(实用版)

近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是有个问题,只能单页使用比较方便.带有tab标签的不推荐使用. 2.自己百度了半天总结出来的一套: <script> document.addEventListener('scroll', watchScroll); var itemIndex = 0; var classid = 10; var

上拉刷新下拉加载控件-PullToRefresh

在很多软件中,我们会用到上拉刷新,同时大多也会有下拉加载的功能,PullToRefresh这个控件就可以帮我们实现这个效果. 要使用这个空间首先我们要导包 布局文件 布局文件中就是添加了一个最简单的PullToRefreshListView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/r

如何制作带有下拉刷新和下拉加载更多的列表

一般的APP软件都是需要下拉刷新,下拉加载这两个功能的,今天我们就来学习怎么样实现这两个功能. 我们先来讲一下他们的原理,这里我们将采取的方案是使用组合View的方式,先自定义一个布局继承自LinearLayout,然后在这个布局中加入下拉头和ListView这两个子元素,并让这两个子元素纵向排列.初始化的时候,让下拉头向上偏移出屏幕,这样我们看到的就只有ListView了.然后对ListView的touch事件进行监听,如果当前ListView已经滚动到顶部并且手指还在向下拉的话,那就将下拉头

使用dragloader.js插件实现上拉加载/下拉刷新..

在写代码时候有个需求是,在触屏页面,为了加快页面加载速度,案件列表每页展示5条数据: 然后点击更多,展示下一页数据: 但是为了触屏更好的体验,改为往上滑动案件列表,加载下一页数据:就是要实现上拉加载/下拉刷新的效果: 我只用到了 上拉加载: 参考资料:http://blog.csdn.net/xb12369/article/details/39202711 下面是写的demo: html代码: <!DOCTYPE html> <html lang="en"> &

vue2.0 结合better-scroll 实现下拉加载

一.建议先了解下better-scroll 的介绍 链接:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88 二.npm 安装 npm install better-scroll --save 三.因为项目里面多个页面会用到上拉加载,所以这里先作为组件来使用,在components新建一个文件夹scroll,然后建立子文件scroll.vue Sc

MUI上拉加载下拉刷新

<!-- 作者:2444626121@qq.com 时间:2017-11-02 描述:如果有问题请邮箱联系我,并注明来自博客园,谢谢呢^o^ --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,min