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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
Vue的轮播图组件实现方法
Mar 03 Javascript
微信小程序block的使用教程
Apr 01 Javascript
简单了解JavaScript异步
May 23 Javascript
vue.js实现二级菜单效果
Oct 19 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
建立动态的WML站点(三)
2006/10/09 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python 基础教程之包和类的用法
2017/02/23 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
python接入支付宝的实例操作
2020/07/20 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
机械制造专业大学生自我鉴定
2014/09/19 职场文书
批评与自我批评范文
2014/10/15 职场文书
2014年营业员工作总结
2014/11/18 职场文书