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 相关文章推荐
文字幻灯片
Jun 26 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python实现的防DDoS脚本
2011/02/08 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python实现网页录音效果
2020/10/26 Python
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
文艺演出主持词
2015/07/01 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript