iScroll5上拉刷新，下拉加載?

目前大部分有關iScroll的例子和教程都是基於iScroll4的，花了一些時間，完成了iScroll5的上拉、下拉

工具/原料

一款Web編輯器

iScroll5官方文檔

方法/步驟

iScroll

前面的許多meta標籤是移動端適配以及對iphone的優化

引用的文件包括less.js和iscroll-probe.js

引用less是因為習慣了less的開發，其實跟css沒區別

iscroll-probe是上拉下拉的版本，iscroll5有4個版本

less文件

*{

margin: 0;

padding: 0;

font-family: "Microsoft YaHei";

}

body{

background: #fff;

}

header{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 40px;

z-index: 2;

background: #ffcc33;

line-height: 40px;

vertical-align: middle;

text-align: center;

font-size: 16px;

color: #fff;

}

.wrapper{

position: absolute;

z-index: 1;

top: 0;

left: 0;

bottom: 0;

width: 100%;

background: #ccc;

overflow: hidden;

.scroller{

position: absolute;

z-index: 1;

width: 100%;

transform: translateZ(0);

user-select: none;

text-size-adjust: none;

.pullDown{

width: 100%;

height: 40px;

// margin-top: -40px;

line-height: 40px;

vertical-align: middle;

text-align: center;

}

ul{

list-style: none;

width: 100%;

text-align: left;

li{

padding: 0 10px;

height: 40px;

line-height: 40px;

vertical-align: middle;

font-size: 14px;

background: #fff;

border-bottom: 1px solid #ddd;

}

}

.pullUp{

width: 100%;

height: 40px;

line-height: 40px;

vertical-align: middle;

text-align: center;

margin-bottom: -40px;

}

}

}

//載入畫面

.spinner {

display: none;

width: 60px;

height: 60px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -30px;

margin-left: -30px;

z-index: 10;

background: rgba(0,0,0,0);

.double-bounce1, .double-bounce2 {

width: 100%;

height: 100%;

border-radius: 50%;

background-color: #000;

opacity: 0.6;

position: absolute;

top: 0;

left: 0;

-webkit-animation: bounce 2.0s infinite ease-in-out;

animation: bounce 2.0s infinite ease-in-out;

}

.double-bounce2 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

@-webkit-keyframes bounce {

0%,

100% {

-webkit-transform: scale(0.0)

}

50% {

-webkit-transform: scale(1.0)

}

}

@keyframes bounce {

0%,

100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

}

50% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

}

}

spinner是一個css3寫的載入動畫

詳細請參考css3動畫

less文件請自己編譯

js文件

var myScroll;

var pullDownFlag,pullUpFlag;

var pullDown,pullUp;

var spinner;

function positionJudge(){

if(this.y>40){ //判斷下拉

pullDown.innerHTML = "放開刷新頁面";

pullDownFlag = 1;

}else if(this.y<(this.maxScrollY-40)){ //判斷上拉

pullUp.innerHTML = "放開刷新頁面";

pullUpFlag = 1;

}

}

function action(){

if(pullDownFlag==1){

pullDownAction();

pullDown.innerHTML = "下拉刷新…";

pullDownFlag = 0;

}else if(pullUpFlag==1){

pullUpAction();

pullUp.innerHTML = "上拉刷新…";

pullUpFlag = 0;

}

}

function loaded(){

pullDownFlag = 0;

pullUpFlag = 0;

pullDown = document.getElementById("pullDown");

pullUp = document.getElementById("pullUp");

spinner = document.getElementById("spinner");

myScroll = new IScroll("#wrapper",{

probeType: 3,

// momentum: false,//關閉慣性滑動

mouseWheel: true,//鼠標滑輪開啟

scrollbars: true,//滾動條可見

fadeScrollbars: true,//滾動條漸隱

interactiveScrollbars: true,//滾動條可拖動

shrinkScrollbars: 'scale', // 當滾動邊界之外的滾動條是由少量的收縮

useTransform: true,//CSS轉化

useTransition: true,//CSS過渡

bounce: true,//反彈

freeScroll: false,//只能在一個方向上滑動

startX: 0,

startY: 0,

// snap: "li",//以 li 為單位

});

myScroll.on('scroll',positionJudge);

myScroll.on("scrollEnd",action);

}

function pullDownAction(){

spinner.style.display = "block";

setTimeout(function(){

var ul = document.getElementById("list");

var lis = ul.getElementsByTagName("li");

for(var i=0;i

lis[i].innerHTML = "下拉刷新";

}

spinner.style.display = "none";

myScroll.refresh();

},1000);

}

function pullUpAction(){

spinner.style.display = "block";

setTimeout(function(){

var ul = document.getElementById("list");

var lis = ul.getElementsByTagName("li");

for(var i=0;i

lis[i].innerHTML = "上拉刷新";

}

spinner.style.display = "none";

myScroll.refresh();

},1000);

}

function updatePosition(){

pullDown.innerHTML = this.y>>0;

}

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

e.preventDefault();

}, false);

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

e.preventDefault();

}, false);

是iScroll的初始化

myScroll.on('scroll',positionJudge);

myScroll.on("scrollEnd",action);

對開始拖動和拖動結束的監聽，這是iScroll5的一個坑，positionJudge和action都是function，但是如果直接以function(){}的方式寫在裡面的話，調用會出問題，所以要單獨寫在外面

編譯一下less文件，找到iScroll-probe.js文件，就可以運行嘗試了

注意事項

文件引用路徑記得改