jquery使用iscorll实现上拉、下拉加载刷新

2024-10-03 00:48:48

本文实例为大家分享了iscorll实现上拉下拉加载刷新的具体代码，供大家参考，具体内容如下

实现原理是:判断fiiptop,flipdown是否显示为依据

myScroll = new iScroll('wraphome', {
        fixedScrollbar: true,
        hideScrollbar: true,
        fadeScrollbar: true,
        hScrollbar: false,
        vScrollbar: true,
        onScrollMove: function () {
          var topstat = $(".fliptop").is(":visible");
          var downstat = $(".flipdown").is(":visible");
          if (this.y > 15 && !topstat && !downstat) {
            $(".fliptop").fadeIn(300);
          } else if (this.y < 15 && topstat) {
            $(".fliptop").hide();
          } else if (this.y < (this.maxScrollY - 25) && !topstat && !downstat) {
            $(".flipdown").fadeIn(300);
            this.refresh(); //这里是当显示正在加载中时刷新底部位置
          } else if (this.y > (this.maxScrollY + 25) && downstat) {
            $(".flipdown").hide();
          }
        },
        onTouchEnd: function () {
          var topstat = $(".fliptop").is(":visible");
          var downstat = $(".flipdown").is(":visible");
          if (topstat && !downstat) {
            $(".fliptop").html("正在加载中……");
            setTimeout(function(){
              //此处为你自己的逻辑方法
            },3000);
          } else if (downstat && !topstat) {
            $(".flipdown").html("正在加载中……");
            setTimeout(function(){
              //此处为你自己的逻辑方法
            },3000);
          } 

        }
      });

页面部分

<div id="wraphome" class="scroll">
   <div class="scroll-inner">
     <div class="fliptop">松手开始加载...</div>
     <div class="list">
        .............
     </div>
     <div class="flipdown">松手开始加载...</div>
   </div>
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. 下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码. 请看下面效果图: 在线预览源码下载 html代码: <div
PHP+jQuery实现滚屏无刷新动态加载数据功能详解

本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
php+jquery+html实现点击不刷新加载更多的实例代码

基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参
jquery实现界面无刷新加载登陆注册

官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面 1这里是html内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi
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使用iscorll实现上拉、下拉加载刷新

本文实例为大家分享了iscorll实现上拉下拉加载刷新的具体代码,供大家参考,具体内容如下实现原理是:判断fiiptop,flipdown是否显示为依据 myScroll = new iScroll('wraphome', { fixedScrollbar: true, hideScrollbar: true, fadeScrollbar: true, hScrollbar: false, vScrollbar: true, onScrollMove: function () { var to
jQuery实现的精美平滑二级下拉菜单效果代码

本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
使用Jquery来实现可以输入值的下拉选单雏型

上网找了一下,有一堆现成的控件,可是现成的我要去了解,来结合我现在系统来应用,要花不少时间,这个时间跟我自己搞一个成本应该差不多那我还不如自己搞一个,比较能了解怎麽运作,後面就更容易加以运用了. 我的目标是,要把这个作成一个控件来使用,并要降低外部程式使用的耦合性,也就是外部程式使用上所需的必要条件要尽量减少,免得一忘记加什麽设定,程式就挂了. 如有可能甚至希望,只会需要引用一个 Jquery 其他 JavaSciprt 都由程式来产生. 最後是希望能结合之
jquery实现简单的二级导航下拉菜单效果

本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl
jquery 实现滚动条下拉时无限加载的简单实例

思路: 通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加. 脚本: var lastId=0;//记录每一次加载时的最后一条记录id,跟您的排序方式有关. var isloading = false; $(window).bind("scroll", function () { if ($(document).scrollTop() + $(window).height() > $(document).height() - 10 &&
php+jQuery实现的三级导航栏下拉菜单显示效果

本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(
jQuery结合CSS制作动态的下拉菜单

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足.本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单. XHTML 首先是要在页面的head部分引入jquery库,这是必须的. <script type="text/javascript" src="js/jquery.js"></script> 接着我使用一个无序列表来构建菜单. <ul class="men
jQuery中select与datalist制作下拉菜单时的区别浅析

一般我们通常使用select制作下拉菜单,但是H5之后,datalist也可以充当select的角色,而且两者还有一点小的不同. 对于select来说,select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加. 但是datalist就不同了,datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果,使用很方便. 据代码示例如下: <input type="text" list="addr"/>
jQuery实现的checkbox级联选择下拉菜单效果示例

本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script language="JavaScript" src="jq
jQuery实现灰蓝风格标准二级下拉菜单效果代码

本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

jquery使用iscorll实现上拉、下拉加载刷新

相关推荐

随机推荐