下拉刷新jq php,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;

}

}

}

})

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

以上这篇Iscrool下拉刷新功能实现方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。