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
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
对于js垃圾回收机制的理解
Sep 14 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
基于mysql的bbs设计(二)
2006/10/09 PHP
文件上传程序的全部源码
2006/10/09 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
PHP 8新特性简介
2020/08/18 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python中的字典操作及字典函数
2018/01/03 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python绘制立方体的方法
2018/07/02 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python如何实现定时器功能
2020/05/28 Python
Python基于template实现字符串替换
2020/11/27 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
企业文化口号
2014/06/12 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
汶川大地震感悟
2015/08/10 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL