jquery使用iscorll實(shí)現(xiàn)上拉、下拉加載刷新
本文實(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í)有所幫助,也希望大家多多支持腳本之家。
- jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁(yè)面及原理
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動(dòng)翻頁(yè)特效
- jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多
- jquery ajax實(shí)現(xiàn)下拉框三級(jí)無(wú)刷新聯(lián)動(dòng),且保存保持選中值狀態(tài)
- 用Jquery實(shí)現(xiàn)多級(jí)下拉框無(wú)刷新的聯(lián)動(dòng)
- 基于jQuery Ajax實(shí)現(xiàn)下拉框無(wú)刷新聯(lián)動(dòng)
- jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
- jquery刷新頁(yè)面的實(shí)現(xiàn)代碼(局部及全頁(yè)面刷新)
- 用Jquery.load載入頁(yè)面實(shí)現(xiàn)局部刷新
- jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁(yè)面實(shí)例
- JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
- jQuery實(shí)現(xiàn)的上拉刷新功能組件示例
相關(guān)文章
jQuery插件MovingBoxes實(shí)現(xiàn)左右滑動(dòng)中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動(dòng)放大圖片插件示例,實(shí)現(xiàn)左右滑動(dòng)和放大效果,有興趣的可以了解一下。2017-02-02jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼)
這篇文章主要介紹了jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼),需要的朋友可以參考下2014-04-04jQuery+css3動(dòng)畫屬性制作獵豹瀏覽器寬屏banner焦點(diǎn)圖
本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點(diǎn)圖特效,代碼很簡(jiǎn)單,效果卻非常棒,而且兼容各大瀏覽器,這里推薦給大家,有需要的小伙伴參考下。2015-03-03jquery文字填寫自動(dòng)高度的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery文字填寫自動(dòng)高度的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
jQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 框架。其宗旨是—寫更少的代碼,做更多的事情。它是輕量級(jí)的 js 庫(kù)(壓縮后只有21k) ,這是其它的 js 庫(kù)所不及 的,它兼容 CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。2008-06-06jQuery通過(guò)寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了jQuery通過(guò)寫入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結(jié)合實(shí)例形式分析了基于jQuery的鼠標(biāo)事件響應(yīng)與頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12