iScroll5上拉刷新，下拉加载

一款Web编辑器

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>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文件，就可以运行尝试了