php 实现下拉刷新,Iscrool下拉刷新实现方法

本文主要为大家带来一篇Iscrool下拉刷新功能实现方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

简易下拉刷新实现方法

css样式：*{

margin: 0px;

padding: 0px;

}

#wrapper{

width: 100%;

height: 150px;

border: 1px solid red;

overflow: hidden;

position: absolute;

}

#shua{

text-align: center;

}

HTML代码

刷新

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

在写js代码之前，要引入jQuery插件和 iscroll插件

然后js代码如下：

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("松开手进行刷新")

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($("

").text("数据"+ z++))

a.refresh()

x=0;

}

}

}

})

这样就完成了一个简单的下拉刷新！！

相关推荐：