jquery使用iscroll实现上拉、下拉加载刷新实例分享

本文主要为大家详细介绍了jquery使用iscorll实现上拉、下拉加载刷新的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

本文实例为大家分享了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  (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);           }          }       });

登录后复制

页面部分

    

      

松手开始加载...

      

         .............      

      

松手开始加载...

     

登录后复制

相关推荐:

iScroll是什么?iScroll用法实例详解

iscroll实现下拉和上拉刷新的实例教程

JQuery插件iScroll实现下拉刷新,滚动翻页特效_jquery

以上就是jquery使用iscroll实现上拉、下拉加载刷新实例分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2790162.html

(0)
上一篇 2025年3月8日 18:52:04
下一篇 2025年2月24日 04:59:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jQuery插件HighCharts绘制2D饼图效果实例分享

    本文主要介绍了jquery插件highcharts绘制2d饼图效果,结合完整实例形式分析了jquery使用highcharts插件绘制饼图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下,希望能帮助到大家…

    2025年3月8日
    200
  • jQuery监听扫码枪禁止手动输入的实现方法

    本文主要和大家 分享基于jquery的扫码枪监听。如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展哦,希望能帮助到大家。 一、功能需求 使用扫码枪扫描条码,在一个web页面监听获取扫码枪的数据,…

    编程技术 2025年3月8日
    200
  • jQuery出错与解决方法小结

    大家有没有遇到过jquery is not define问题?今天在测试一个程序的时候,明显已经加载了jquery但总是提示jquery is not defined,经过多方测试终于发现了问题,这里简单总结一下,需要的朋友可以参考下,希望…

    编程技术 2025年3月8日
    200
  • jQuery中用on绑定事件时需要注意些什么

    随着jquery版本的更新,以前版本的bind(),live(),delegate()事件可以直接被on代替,本次笔记仅以点击事件为例,主要考察了on事件的用法:本文主要介绍了jquery中用on绑定事件时需注意的事项,具有很好的参考价值。…

    编程技术 2025年3月8日
    200
  • jQuery实现圆点图片轮播实例分享

    在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片。接下来通过本文给大家分享用jquery实现圆点图片轮播效果实例代码,需要的朋友参考下,希望能帮助到大家。 图片轮播效果 : 在页面…

    2025年3月8日
    200
  • jQuery中table数据值的拷贝和拆分详解

    在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,不过现在就介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值。  …

    编程技术 2025年3月8日
    200
  • jQuery实现验证码功能实例分享

    很多编程语言都能实现验证码功能,本文主要介绍了jquery实现验证码功能的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧,希望能帮助到大家。 效果图: 代码如下: nbsp;html>   Document  #code{ w…

    2025年3月8日
    200
  • jquery手势密码插件详解

    手势密码也是现在很流行的一种功能本文主要介绍了jquery手势密码插件的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧,希望能帮助到大家。 效果图: 代码如下: nbsp;html>   <!—->正确的密码是…

    2025年3月8日
    200
  • jquery datatable和bootsrap创建表格实例教程

    本文主要介绍了使用jquery-datatable和bootsrap创建表格的实例代码,需要的朋友可以参考下,希望能帮助大家掌握datatable和bootsrap创建表格的方法。  使用jquery-datatable插件 bootstr…

    2025年3月8日
    200
  • jquery PrintArea票据的套打功能实现方法

    套打就是指不打印表单上的表结构和固定的文言,只把会变化的数据打印出来,本文主要为大家带来一篇jquery printarea 实现票据的套打功能(代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮…

    2025年3月8日
    200

发表回复

登录后才能评论