jquery使用iscorll實現(xiàn)上拉、下拉加載刷新
更新時間:2017年10月26日 16:11:43 作者:飛奔的貓
這篇文章主要為大家詳細介紹了jquery使用iscorll實現(xiàn)上拉、下拉加載刷新的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了iscorll實現(xiàn)上拉下拉加載刷新的具體代碼,供大家參考,具體內(nèi)容如下
實現(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(); //這里是當顯示正在加載中時刷新底部位置 } 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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
- JQuery插件iScroll實現(xiàn)下拉刷新,滾動翻頁特效
- jQuery+AJAX實現(xiàn)無刷新下拉加載更多
- jquery ajax實現(xiàn)下拉框三級無刷新聯(lián)動,且保存保持選中值狀態(tài)
- 用Jquery實現(xiàn)多級下拉框無刷新的聯(lián)動
- 基于jQuery Ajax實現(xiàn)下拉框無刷新聯(lián)動
- jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路
- jquery刷新頁面的實現(xiàn)代碼(局部及全頁面刷新)
- 用Jquery.load載入頁面實現(xiàn)局部刷新
- jQuery實現(xiàn)AJAX定時刷新局部頁面實例
- JQuery+Ajax無刷新分頁的實例代碼
- jQuery實現(xiàn)的上拉刷新功能組件示例
相關文章
jQuery插件MovingBoxes實現(xiàn)左右滑動中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動放大圖片插件示例,實現(xiàn)左右滑動和放大效果,有興趣的可以了解一下。2017-02-02jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗證碼)
這篇文章主要介紹了jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗證碼),需要的朋友可以參考下2014-04-04jQuery+css3動畫屬性制作獵豹瀏覽器寬屏banner焦點圖
本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點圖特效,代碼很簡單,效果卻非常棒,而且兼容各大瀏覽器,這里推薦給大家,有需要的小伙伴參考下。2015-03-03jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法
這篇文章主要介紹了jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法,涉及jQuery結(jié)合cookie設置頁面元素屬性的相關操作技巧,需要的朋友可以參考下2016-04-04jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結(jié)合實例形式分析了基于jQuery的鼠標事件響應與頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2016-12-12