jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新

更新時(shí)間：2017年10月26日 16:11:43 作者：飛奔的貓

這篇文章主要為大家詳細(xì)介紹了jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了iscorll實(shí)現(xiàn)上拉下拉加載刷新的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)原理是:判斷fiiptop,flipdown是否顯示為依據(jù)

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(); //這里是當(dāng)顯示正在加載中時(shí)刷新底部位置 
          } 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); 
          } 
 
        } 
      });

頁(yè)面部分

<div id="wraphome" class="scroll"> 
   <div class="scroll-inner"> 
     <div class="fliptop">松手開(kāi)始加載...</div> 
     <div class="list"> 
        ............. 
     </div> 
     <div class="flipdown">松手開(kāi)始加載...</div> 
   </div> 
</div>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery控制TR顯示隱藏的幾種方法
使用id，這個(gè)方法可以在生成html的時(shí)候動(dòng)態(tài)設(shè)置tr的id，也是用得最多最簡(jiǎn)單的一種，其他方法祥看本文
2014-06-06
jQuery實(shí)現(xiàn)菜單欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單菜單欄導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
jquery根據(jù)屬性和index來(lái)查找屬性值并操作
這篇文章主要介紹了jquery如何根據(jù)屬性和index來(lái)查找屬性值并操作,需要的朋友可以參考下
2014-07-07
使用veloticy-ui生成文字動(dòng)畫效果
這篇文章主要介紹了使用veloticy-ui生成文字動(dòng)畫效果及基本使用方法,需要的朋友可以參考下
2018-02-02
jquery CSS選擇器筆記
今天是CSS的選擇器，以后還有一部分xPath的選擇器。今天的筆記中包括44個(gè)選擇器，基本涵蓋了CSS 2和CSS 3的所有規(guī)定。
2010-03-03
使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效
這篇文章主要介紹了使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效的相關(guān)資料,需要的朋友可以參考下
2015-12-12
自己動(dòng)手實(shí)現(xiàn)jQuery Callbacks完整功能代碼詳解
最近大量的用到j(luò)Query Callbacks 對(duì)象，jQuery庫(kù)中的$.ajax()和$.Deferred() 對(duì)象也是基于這個(gè)對(duì)象實(shí)現(xiàn)，下面我們也模擬實(shí)現(xiàn)jQuery Callbacks 對(duì)象的部分功能
2013-11-11
ASP SQL防注入的方法
前一篇我們介紹了一種防SQL注入的終極方法，也就是最原始、最簡(jiǎn)單、最有效也是最通用的方法，就是數(shù)據(jù)類型的檢查加單引號(hào)的處理，具體的內(nèi)容前面一篇已經(jīng)介紹過(guò)了，這里我就不重復(fù)了
2008-12-12
jQuery創(chuàng)建自己的插件(自定義插件)的方法
在該系列之前的文章使用 jQuery：UI 項(xiàng)目中，我介紹了使用 jQuery 代碼中的插件來(lái)提高 web 應(yīng)用程序的效率。
2010-06-06
淺析bootstrap原理及優(yōu)缺點(diǎn)
網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理，是通過(guò)定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見(jiàn)的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)
2017-03-03