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 相关文章推荐
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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重定向的三种方法分享
2012/02/22 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python之py2exe打包工具详解
2017/06/14 Python
python ftplib模块使用代码实例
2019/12/31 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
经典的班主任推荐信
2013/10/28 职场文书
感恩教育月活动总结
2014/07/07 职场文书
教师节横幅标语
2014/10/08 职场文书
工商局个人工作总结
2015/03/03 职场文书
安全教育主题班会教案
2015/08/12 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Python采集壁纸并实现炫轮播
2022/04/30 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS