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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
js实现旋转木马效果
Mar 17 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php实例化一个类的具体方法
2019/09/19 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
新电JAVA笔试题目
2014/08/31 面试题
了解AppleTalk协议吗
2014/04/01 面试题
优秀团队获奖感言
2014/02/19 职场文书
部队万能检讨书
2014/02/20 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
美丽人生观后感
2015/06/03 职场文书
追悼会悼词大全
2015/06/23 职场文书