標(biāo)簽下，這是調(diào)用iscroll的必要條件，否則會(huì)出現(xiàn)不能刷新或者不能滑動(dòng)頁(yè)面的情況。此外還有商量刷新及下拉刷新的標(biāo)簽，在iscroll中有這兩個(gè)標(biāo)簽的樣式，若不想用默認(rèn)的樣式，也可通過(guò)覆蓋的方式添加其他樣式，此處用默認(rèn)樣式。

當(dāng)頁(yè)面內(nèi)容超過(guò)當(dāng)前頁(yè)面顯示區(qū)域時(shí)，iscroll將會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，額外的要設(shè)置wrapper的css樣式為position:absolute,否則將出現(xiàn)不能拖動(dòng)問(wèn)題。

下拉刷新...

刷新內(nèi)容

上拉加載更多...

(3)js相關(guān)配置

①創(chuàng)建列表

function createHtml(list){}

var myScroll, pullUpEl,pullDownOffset,

pullUpOffset,generatedCount = 0;

var page = 1;

var hasNew=true;

②初始化iScroll控件

Loaded()定義iscroll的刷新動(dòng)作，上拉加載更多，下拉刷新列表，若沒(méi)有更多數(shù)據(jù)將提示“加載完成，沒(méi)有更多記錄”，myScroll

= new

iScroll(),設(shè)置iscroll的基本屬性，當(dāng)手動(dòng)滑動(dòng)iscroll屏幕時(shí)，如果當(dāng)前縱坐標(biāo)大于5時(shí)，證明向下滑動(dòng)，所以將提示“下拉刷新”，并且滑動(dòng)完將縱坐標(biāo)置為0，即回到頂部。當(dāng)縱坐標(biāo)大于最大的縱坐標(biāo)+5時(shí)，說(shuō)明正在向下滑動(dòng)，將提示“下拉加載更多“；當(dāng)滑動(dòng)結(jié)束將判斷是上拉還是下拉確定是否執(zhí)行加載下一頁(yè)數(shù)據(jù)還是刷新列表回到第一頁(yè)。

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

'松手開(kāi)始更新...';

this.minScrollY = 0;

} else if (this.y <

(this.maxScrollY - 5)

'松手開(kāi)始更新...';

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);

④滾動(dòng)翻頁(yè)(自定義實(shí)現(xiàn)此方法)

myScroll.refresh()，當(dāng)執(zhí)行翻頁(yè)時(shí)將加載下一頁(yè)數(shù)據(jù)，即ajax請(qǐng)求后臺(tái)數(shù)據(jù)，將當(dāng)前頁(yè)數(shù)加1，傳到后臺(tái)，后臺(tái)返回?cái)?shù)據(jù)，前端將數(shù)據(jù)展示在頁(yè)面上，當(dāng)數(shù)據(jù)加載完成后，調(diào)用界面更新方法，頁(yè)面滾動(dòng)到相應(yīng)的滑動(dòng)位置。

function pullUpAction() {

setTimeout(

function() {

var el, li, i;

page++;

ajax請(qǐng)求

}

myScroll.refresh();

if(!hasNew){

$(".pullUpLabel").html("加載完成，沒(méi)有更多記錄");

}

}, 1000); }

function pullDownAction() {

setTimeout(

function()

{

var el, li, i;

page=1;

ajax請(qǐng)求

}

myScroll.refresh();

},

1000);

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。