当前位置:首页 > 日记 > 正文

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

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 < 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> 

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

相关文章

微信个性签名伤感短语伤感好听好看

微信个性签名伤感短语伤感好听好看

微信签名,流行,伤感,短语,个性签名,  最喜欢的音乐是你的声音,最喜欢的文字是你说过的话,最喜欢的路是和你一起走过的路,最喜欢的人是你。最伤心的事,是离开你。下面是小编整理的微信个性签名伤感短语的内容,希望能够帮到您。微信个性签名伤感…

nodejs mysql 实现分页的方法

nodejs mysql 实现分页的方法

方法,分页,电脑软件,nodejs,mysql,这两天学习了nodejs mysql 实现分页,很重要,所以,今天添加一点小笔记。代码如下var express = require('express');var router = express.Router();var settings = require('../settings.js');var mysql …

ASP.NET Core应用中与第三方IoC/DI

ASP.NET Core应用中与第三方IoC/DI

框架,第三方,中与,电脑软件,NET,一、ConfigureServices方法返回的ServiceProvider没有用!我们可以通过一个简单的实例来说明这个问题。我们先定义了如下这个一个MyServiceProvider,它实际上是对另一个ServiceProvider的封装。简单起见,我们利…

PS怎么利用两张照片合成佛光普照效

PS怎么利用两张照片合成佛光普照效

普照,照片,佛光,两张,效果,Photoshop软件作为一款比较强大的修图软件,它在修图方面有着无可比拟的优势,这也是它能给我们创新一个神奇世界的优势之处。以下小编&ldquo;林曌乐园&rdquo;便为大家分享一下如何使用PS软件制作&ldquo;佛光普照&rdq…

JS数组操作中的经典算法实例讲解

JS数组操作中的经典算法实例讲解

数组操作,经典算法,实例,电脑软件,JS,冒泡排序<script type="text/javascript">var arr = [3,7,6,2,1,5];定义一个交换使用的中间变量var temp = 0;for(i=0;i<arr.length;i++){ for(j=0;j<arr.length;j++){如果下一个元素小于当前元素 …

ppt2010怎样设置4比3模式PPT设置放

ppt2010怎样设置4比3模式PPT设置放

设置,模式,方法,比例,电脑软件,  ppt2013默认为宽屏我16:9,怎么才能设置成正常的4:3的显示呢?对于新手来说还是有一定难度,怎么办?不用着急,接下来小编举例简单的例子告诉大家ppt2010设置4 3模式的方法。ppt2010设置4比3模式的方法打开ppt20…

jQuery.Sumoselect插件实现下拉复

jQuery.Sumoselect插件实现下拉复

复选框,插件,效果,电脑软件,jQuery,简单介绍jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能…

入门:AI旋转复制法使用方法

入门:AI旋转复制法使用方法

使用方法,入门,电脑软件,AI,前面我们已经介绍了ai软件里面常用的两种复制方法,接下来我们介绍第三种复制方法&mdash;&mdash;旋转复制法。1、新建画布,用矩形工具任意在画布上绘制一个小横条红色矩形2、在软件界面左边的工具栏里面,有个旋转箭…

JS实现手写parseInt的方法示例

JS实现手写parseInt的方法示例

方法,示例,电脑软件,JS,parseInt,前言本文主要给大家介绍了关于JS实现手写parseInt的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。手写parseInt的实现:要求简单一些,把字符串型的数字转化为真正的数字即可,但不能使…

如何通过模仿快速提高PPT制作水平

如何通过模仿快速提高PPT制作水平

快速,电脑软件,PPT,  想快速提高自己的PPT水平保持一颗好奇心就足够了,但如果对PPT的一些基本设计原理都缺乏了解,发现一个PPT的设计之美是很困难的,这时候,最好的方法就是模仿。以下是小编为您带来的关于通过模仿快速提高PPT制作水平,希望对…

js从输入框读取内容,比较两个数字

js从输入框读取内容,比较两个数字

数字,输入框,方法,读取,大小,因为从输入框读取的内容是String类型的,所以直接比较的话,是用asc码来比较的,如果要比较数字的大小应该加上parseFloat,比如:if(parseFloat(amnt1) < parseFloat(amnt2)){}以上这篇js从输入框读取内容,比较两个数字…

ps怎么使用动作是对图形进行多色填

ps怎么使用动作是对图形进行多色填

填充,图形,多色,动作,电脑软件,ps中想要填充图形,该怎么填充不同颜色的图形呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、在桌面上双击Photoshop的快捷图标,打开Photo…