iScroll5上拉刷新，下拉加载

iScroll5上拉刷新，下拉加载

目前大部分有关iScroll的例子和教程都是基于iScroll4的，花了一些时间，完成了iScroll5的上拉、下拉

前面的许多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文件，就可以运行尝试了