jQuery实现下拉加载功能实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<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实现下拉加载功能实例代码,希望对大家有所帮助!
相关推荐
-
jQuery实现模仿微博下拉滚动条加载数据效果
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>滚动条距离底部</title> <script src="jquery-1.6.2.min.js" type="text/javascript&
-
asp.net+jquery滚动滚动条加载数据的下拉控件
这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下
-
jquery动态加载select下拉框示例代码
如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g
-
jQuery+AJAX实现无刷新下拉加载更多
随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css 和简单js交互. js code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t
-
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. 下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码. 请看下面效果图: 在线预览 源码下载 html代码: <div
-
JQuery异步加载无限下拉框级联功能实现示例
复制代码 代码如下: <pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/* JQuery异步加载无限极下拉框级联功能 zjy */ (function ($) { $.ajaxSetup({ async: false }); var url = "
-
jQuery实现下拉加载功能实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = ''; if(page=="") page=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll( function(event){ //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 10 >= $(docum
-
MUI 上拉刷新/下拉加载功能实例代码
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldown/ <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> &l
-
mui上拉加载功能实例详解
最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com
-
Android ListView实现下拉加载功能
本文实例为大家分享了ListView下拉加载展示的具体代码,供大家参考,具体内容如下 1.MyListView.Java public class MyListView extends ListView implements OnScrollListener { private final static int RELEASE_To_REFRESH = 0;// 下拉过程的状态值 private final static int PULL_To_REFRESH = 1; // 从下拉返回到不刷新
-
iOS使用自带的UIViewController实现qq加号下拉菜单的功能(实例代码)
创建PopViewControlller 在tableview中创建一个tableview用于显示菜单 //重置控制器的大小 -(CGSize)preferredContentSize{ if (self.popoverPresentationController != nil) { CGSize tempSize ; tempSize.height = self.view.frame.size.height; tempSize.width = 150; CGSize size = [_tabl
-
微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递
微信小程序 getApp() 方法 小程序提供了全局的 getApp() 方法,可获取当前小程序实例,一般用于在子页面中获取顶层应用. // app.js App({ globalData: 1 }); // page.js var app = getApp(); console.log(app.globalData); // 获取 globalData 一 整体结构 图片目录(images).页面目录(pages).公共脚本(utils).全局配置(app.json.project.confi
-
微信小程序实现页面下拉刷新和上拉加载功能详解
本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water
-
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET.POST请求方式,支持返回json.xml.html.text.script数据类型: 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get().mui.getJSON().mui.post()三个方法. 套用mui官方文档的一句话:"开发者只需关心业务逻辑,实现加载更多数据即可".真的是不错的框架. 想更多的了解这个框
-
Ionic如何实现下拉刷新与上拉加载功能
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择.Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程
随机推荐
- JavaScript中的原型继承基础学习教程
- vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
- vue-router 导航钩子的具体使用方法
- 校内网,大学生校内网的定义
- thinkphp实现面包屑导航(当前位置)例子分享
- 详解IOS中文件路径判断是文件还是文件夹
- filters.revealTrans.Transition使用方法小结
- MySQL查询优化的5个实用技巧
- Android编程简单实现雷达扫描效果
- chrome调试javascript详解
- 算法系列15天速成——第十五天 图【下】(大结局)
- 一个简单的转换输出的shell脚本代码
- MongoDB学习笔记之GridFS使用介绍
- Nginx防盗链的配置方法
- 轻松掌握Java享元模式
- java数据结构之实现双向链表的示例
- C#生成影像金字塔的原理实例
- jQuery getJSON()+.ashx 实现分页(改进版)
- C#程序优化-有效减少CPU占用率
- C#使用dir命令实现文件搜索功能示例