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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
PassWord输入框代码分享
Jun 07 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
如何快速上手Vuex
Feb 14 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
深入Python函数编程的一些特性
2015/04/13 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
法律进学校实施方案
2014/03/15 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
爱国影片观后感
2015/06/18 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL