iscroll用ajax加载数据,笔记：基于Iscroll.js 实现的上拉加载~

引入JQUERY 和 ISCROLL.JS即可~

• 111111111

上拉加载...

var myscroll = new iScroll("wrapper",{

onScrollMove:function(){//滚动条开始滚动时

if (this.y

$('.pull_icon').addClass('flip');//这几个CLASS是原作添加的动画，就没放上来了，根据自己需要写就行了。

$('.pull_icon').removeClass('loading');

$('.more span').text('释放加载...');

}else{

$('.pull_icon').removeClass('flip loading');

$('.more span').text('上拉加载...')

}

},

onScrollEnd:function(){//松开滚动条后

if ($('.pull_icon').hasClass('flip')) {

$('.pull_icon').addClass('loading');

$('.more span').text('加载中...');

pullUpAction();//这里调用方法刷新添加节点

}

},

onRefresh:function(){//刷新后

$('.more').removeClass('flip');

$('.more span').text('上拉加载...');

}

});

function pullUpAction(){

setTimeout(function(){

/*$.ajax({ //这一段是注释了的，测试可用下面append的死数据；

url:'/json/ay.json',

type:'get',

dataType:'json',

success:function(data){

for (var i = 0; i < 5; i++) {

$('.scroller ul').append(data);

}

myscroll.refresh();

},

error:function(){

console.log('error');

},

})*/

for (var i = 0; i < 5; i++) {

$('.scroller ul').append("

222222");

}

myscroll.refresh();

}, 1000)

}

if ($('.scroller').height()

$('.more').hide();

myscroll.destroy();

}