ajax 下拉刷新 上拉加载更多,局部刷新iscroll控件的具体使用（下拉刷新，上拉加载更多）...

标签下，这是调用iscroll的必要条件，否则会出现不能刷新或者不能滑动页面的情况。此外还有商量刷新及下拉刷新的标签，在iscroll中有这两个标签的样式，若不想用默认的样式，也可通过覆盖的方式添加其他样式，此处用默认样式。

当页面内容超过当前页面显示区域时，iscroll将会自动出现滚动条，额外的要设置wrapper的css样式为position:absolute,否则将出现不能拖动问题。

下拉刷新...

刷新内容

上拉加载更多...

(3)js相关配置

①创建列表

function createHtml(list){}

var myScroll, pullUpEl,pullDownOffset,

pullUpOffset,generatedCount = 0;

var page = 1;

var hasNew=true;

②初始化iScroll控件

Loaded()定义iscroll的刷新动作，上拉加载更多，下拉刷新列表，若没有更多数据将提示“加载完成，没有更多记录”，myScroll

= new

iScroll(),设置iscroll的基本属性，当手动滑动iscroll屏幕时，如果当前纵坐标大于5时，证明向下滑动，所以将提示“下拉刷新”，并且滑动完将纵坐标置为0，即回到顶部。当纵坐标大于最大的纵坐标+5时，说明正在向下滑动，将提示“下拉加载更多“；当滑动结束将判断是上拉还是下拉确定是否执行加载下一页数据还是刷新列表回到第一页。

function loaded() {

pullDownEl =

document.getElementByIdx_x('pullDown');

pullDownOffset =

pullDownEl.offsetHeight;

pullUpEl =

document.getElementByIdx_x('pullUp');

pullUpOffset =

pullUpEl.offsetHeight;

myScroll = new iScroll(

'wrapper',

{

scrollbarClass :

'myScrollbar',

//重要样式

useTransition :

false,

topOffset :

pullDownOffset,

onRefresh : function() {

上拉加载更多...';

},

onScrollMove : function()

{

if (this.y > 5

'松手开始更新...';

this.minScrollY = 0;

} else if (this.y <

(this.maxScrollY - 5)

'松手开始更新...';

this.maxScrollY = this.maxScrollY;

} else if (this.y >

(this.maxScrollY + 5)

'上拉加载更多...';

this.maxScrollY = pullUpOffset;

}

},

onScrollEnd : function()

{

});

setTimeout(function()

{

document.getElementByIdx_x('wrapper').style.left

= '0';

}, 800);

}

③初始化绑定iScroll控件。

document.addEventListener('touchmove', function(e) {},

false);

document.addEventListener('DOMContentLoaded', loaded,

false);

④滚动翻页(自定义实现此方法)

myScroll.refresh()，当执行翻页时将加载下一页数据，即ajax请求后台数据，将当前页数加1，传到后台，后台返回数据，前端将数据展示在页面上，当数据加载完成后，调用界面更新方法，页面滚动到相应的滑动位置。

function pullUpAction() {

setTimeout(

function() {

var el, li, i;

page++;

ajax请求

}

myScroll.refresh();

if(!hasNew){

$(".pullUpLabel").html("加载完成，没有更多记录");

}

}, 1000); }

function pullDownAction() {

setTimeout(

function()

{

var el, li, i;

page=1;

ajax请求

}

myScroll.refresh();

},

1000);

}