Iscrool下拉刷新功能實(shí)現(xiàn)方法(推薦)
更新時(shí)間：2017年06月26日 07:52:41 投稿：jingxian
下面小編就為大家?guī)硪黄狪scrool下拉刷新功能實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
簡易下拉刷新實(shí)現(xiàn)方法
css樣式：
*{
margin: 0px;
padding: 0px;
}
#wrapper{
width: 100%;
height: 150px;
border: 1px solid red;
overflow: hidden;
position: absolute;
}
#shua{
text-align: center;
}
HTML代碼
<div id="wrapper">
<div>
<div id="shua">刷新</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
在寫js代碼之前，要引入jQuery插件和 iscroll插件
然后js代碼如下：
<script type="text/javascript">
//給內(nèi)容添加滾動(dòng)事件
var a=new IScroll("#wrapper",{
scrollbars:true,
mouseWheel:true,
interactiveScrollbars:true,
// scrollX:true,
// freeScroll:true,
probeType:2,
})
//讓文字先隱藏
$("#shua").hide();
var x=0;
a.on("scroll",function(){
if(x==0){
if(this.y>40){
$("#shua").show();
$("#shua").text("松開手進(jìn)行刷新")
x=1;
}
a.on("scrollEnd",function(){
if(x==1){
$("#shua").text("正在刷新")
setTimeout(shuju,1000)
x=2;
}
})
var z=0;
function shuju(){
if(x==2){
$("#shua").hide();
$("ul>li:nth-child(1)").before($("<li></li>").text("數(shù)據(jù)"+ z++))
a.refresh()
x=0;
}
}
}
})
</script>
這樣就完成了一個(gè)簡單的下拉刷新！！
以上這篇Iscrool下拉刷新功能實(shí)現(xiàn)方法(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jquery添加div實(shí)現(xiàn)消息聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
jQuery-Tools-overlay 使用介紹，需要的朋友可以參考下2012-07-07
jQuery使用數(shù)組編寫圖片無縫向左滾動(dòng)
jQuery編程實(shí)現(xiàn)一組由8幅圖組成的圖片，進(jìn)入網(wǎng)頁初始時(shí)顯示前面4張，然后自動(dòng)向左滾動(dòng)，直到屏幕顯示的是后4張時(shí)停止?jié)L動(dòng)，需要的朋友可以參考下2012-12-12
jQuery實(shí)現(xiàn)平滑滾動(dòng)的標(biāo)簽分欄切換效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)平滑滾動(dòng)的標(biāo)簽分欄切換效果,涉及jquery鼠標(biāo)事件及頁面元素樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)硪黄猨Query 添加樣式屬性的優(yōu)先級別方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了深入了解query和params的使用區(qū)別，路由傳參的時(shí)候，有倆兄弟，一個(gè)叫query，一個(gè)叫parmas，你說他們倆長得也不像吧，可這用法實(shí)在是太類似了，下面就讓我們分別從vue路由和Node接收兩個(gè)角度講他們的區(qū)別,需要的朋友可以參考下2019-06-06
事件是腳本編程的靈魂,本篇來介紹jQuery中的事件處理及事件對象.這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2016-10-10
jquery實(shí)現(xiàn)簡單Tab切換菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單Tab切換菜單效果的相關(guān)資料,需要的朋友可以參考下2016-06-06
jQuery自動(dòng)完成插件completer附源碼下載
這篇文章主要介紹了jQuery自動(dòng)完成插件completer的相關(guān)資料,需要的朋友可以參考下2016-01-01
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建RSS Feed閱讀器
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，我們將通過 jQuery EasyUI框架創(chuàng)建一個(gè)RSS閱讀器，感興趣的小伙伴們可以參考一下2015-11-11