標簽下，這是調用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);

}

總結

以上是生活随笔為你收集整理的ajax 下拉刷新 上拉加载更多,局部刷新iscroll控件的具体使用（下拉刷新，上拉加载更多）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。