天天看點
傳回

關于移動端上拉加載下拉重新整理我的的了解和做法

HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<title>iScroll下拉重新整理上滑加載</title>
<link rel="stylesheet" href="style/main.css" />
</head>
<body>

<div class="header">header</div>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownLabel">下拉重新整理</span>
        </div>
        <ul id="thelist">
            <!--<li>原始資料</li>-->
        </ul>
        <div id="pullUp">
            <span class="pullUpLabel">上拉加載更多</span>
        </div>
    </div>
</div>
<!--<div class="footer">footer</div>-->
<script src="script/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="script/iscroll.js"></script>
<script type="text/javascript" src="script/main.js"></script>

</body>
</html>
           
CSS:
body,
ul,
li {
    padding: ;
    margin: ;
    border: 
}

body {
    font-size: px;
    font-family: microsoft yahei
}

.header {
    position: absolute;
    top: ;
    left: ;
    width: %;
    height: px;
    line-height: px;
    font-size: px;
    text-align: center;
    background: #e6e6e6
}

.footer {
    position: absolute;
    bottom: ;
    left: ;
    width: %;
    height: px;
    line-height: px;
    font-size: px;
    text-align: center;
    background: #e6e6e6
}

#wrapper {
    position: absolute;
    top: px;
    bottom: px;
    left: ;
    width: %
}

#scroller li {
    padding:  px;
    height: px;
    overflow: hidden;
    line-height: px;
    background: #ecf6ff;
    margin-top: px
}

#pullDown,
#pullUp {
    padding:  px;
    height: px;
    line-height: px;
    color: #888;
    text-align: center
}
           
JS（務必先引入iscroll.js和jquery）
var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = ;

function loaded() {
    //動畫部分
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');   
    pullUpOffset = pullUpEl.offsetHeight;
    myScroll = new iScroll('wrapper', {
        useTransition: true,
        topOffset: pullDownOffset,
        onRefresh: function () {
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉重新整理';
            } else if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多';
            }
        },
        onScrollMove: function () {

            if (this.y >  && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '釋放重新整理';
                this.minScrollY = ;
            } else if (this.y <  && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                this.minScrollY = -pullDownOffset;
            } else if (this.y < (this.maxScrollY - ) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '釋放重新整理';
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + ) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中';               
                pullDownAction();   // Execute custom function (ajax call?)
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中';               
                pullUpAction(); // Execute custom function (ajax call?)
            }
        }
    });

    loadAction();
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);//阻止冒泡
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, ); }, false);

//初始狀态，加載資料
function loadAction(){
    $.ajax({
        type:"get",
        url:"data/data1.json",
        async:true,
        success:function  (result) {
            var oData=result.data;
            for (var i=;i<oData.length;i++) {
                var li="<li>"+oData[i].title+"</li>";
                $("#thelist").append(li);
            }
            //加載完資料之後一定要記得重新整理
            myScroll.refresh();
        }           
    });
}

//下拉重新整理目前資料
function pullDownAction () {
    setTimeout(function () {
        //這裡執行重新整理操作

        myScroll.refresh(); 
    }, );
}

//上拉加載更多資料
function pullUpAction () {
    setTimeout(function () {
        $.ajax({
            type:"get",
            url:"data/data1.json",
            async:true,
            success:function  (result) {
                var oData=result.data;
                for (var i=;i<oData.length;i++) {
                    var li="<li>"+oData[i].title+"</li>";
                    $("#thelist").append(li);
                }
                //加載完資料之後一定要記得重新整理
                myScroll.refresh();
            }           
        });
    }, );
}
移動端開發 上拉重新整理下拉加載架構 m端 移動開發 iscroll5
上一篇: iScroll使用總結問題1：頁面需要翻頁，但是每個頁面中，又要求有能夠點選的連結問題2：在一個分頁中。需要同時實作上下滑動和左右滑動。問題3：當實作了可以同時上下左右滑動的時候，總是會造成手勢的誤操作。
下一篇: IScroll訓示訓示

繼續閱讀