jQuery实现下拉加载功能实例代码


Posted in Javascript onApril 01, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script>
var str = '';
if(page=="") page=1; 
var stop=true;//触发开关,防止多次调用事件 
$(window).scroll( function(event){
//当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. 
if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {
//if(stop==true){ 
//stop=false; 
//var canshu="page/"+page+"; 
var url = "";
var parm = {'page':page};
page=page+1;//当前要加载的页码 
//加载提示信息 
$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>");
$.post(url,parm,function(data){
if( data.count == 0 ) {
$('.prolist-abtn').html('已全部加载完');
return;
} 
$.each(eval(data), function(data, val) {
var url1 = "";
$(".ajaxtips").hide();
str = '<div class="content" id="showdiv">';
str +='<div class="cont clearfix">';
str +='<a href="url"><div class="cont_img fl">';
str +='<img src='+val.imgurl+' alt="" /></div>';
str += '<div class="cont_list fl"><p>'+val.sceneryname+'</p><ul class="cont_list fl">';
str += '<li class="cont_list2"><span>¥</span>';
str +='<strong>'+val.sellerprice+'</strong>起<i>¥'+val.sellerprice+'</i></li>';
str +='</ul></div></a></div></div>';
$("#showdiv").append(str);//把新的内容加载到内容的后面 
}); 
stop=true; 
},'JSON') 
} 
});
</script>

以上代码是小编给大家分享的jQuery实现下拉加载功能实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
如何在Linux上安装Node.js
Apr 01 #Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 #Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 #Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
php5 mysql分页实例代码
2008/04/10 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
PHP的反射机制实例详解
2017/03/29 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
python线程、进程和协程详解
2016/07/19 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python turtle库的画笔控制说明
2020/06/28 Python
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
煤矿安全承诺书
2014/05/22 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
优质服务标语口号
2015/12/26 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
python pygame 开发五子棋双人对弈
2022/05/02 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android