首页 > 代码库 > iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

上拉刷新,下拉加载更多。。。仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法:

(如果不好使,调试你的css,想必是个很蛋疼的问题,给点提示 :#wrapper,以及#scroller-content要注意)

html如下:

 <div class="viewport">
        <div id="wrapper" class="wrapper">
            <div id="scroller">
                <div id="scroller-pullDown">
                    <span id="down-icon" class="pull-down-icon fa fa-refresh fa-spin fa-fw"></span>
                    <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
                </div>
                <div id="scroller-content">
                      //你写的内容在这里
                </div>
                <div id="scroller-pullUp">
                    <span id="up-icon" class="pull-up-icon fa fa-spinner fa-spin fa-fw"></span>
                    <span id="pullUp-msg" class="pull-up-msg">上拉加载</span>
                </div>
            </div>
        </div>
    </div>

css如下:

/* =================iscroll================================= */

#wrapper {
    position: absolute;
    z-index: 1;
    top: 210*@size;
    bottom: 0px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

#scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#scroller-pullDown,
#scroller-pullUp {
    background: #333333;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    font-size: 14px;
    color: #888;
    text-align: center;
    position: absolute;
    left: 0px;
    width: 100%;
}

#scroller-pullDown {
    top: -50px;
}

#scroller-pullUp {
    bottom: -50px;
}

.pull-up-msg,
.pull-down-msg {
    padding-left: 5px;
    position: relative;
    top: 0px;
}

#scroller-pullDown .pull-down-icon,
#scroller-pullUp .pull-up-icon {
    display: inline-block;
    color: #e84c3d;
    font-size: 16px;
}

js代码看这里:

    function pushData(m) {
        var m = m || 10;
        if (flag) {
//发送Ajax,循环自己的数据加载: $.myGET(uri, {formData
}, function (data) { if (data.result) { for (var i = 0; i < data.package.length; i++) { data.package[i].isPass ? data.package[i].isPass = "pass" : data.package[i].isPass = "unpass"; temp = ‘<li>‘ + ‘<span class="item ellips">‘ + data.package[i].planName + ‘</span>‘ + ‘<span class="time">‘ + ‘2017.03.08‘ + ‘</span>‘ + ‘<span class="score">‘ + data.package[i].score + ‘</span>‘ + ‘<span class="status"><img src="http://www.mamicode.com/images/mainFrame/icon_result_‘ + data.package[i].isPass + ‘.png" ></span>‘ + ‘<li>‘; $("#target").append(temp); } if (m * n > data.total) { $("#pullUp-msg").text("已无更多数据"); flag = false; return false; } } } (function(window) { var myScroll, upIcon = $("#up-icon"), downIcon = $("#down-icon"), target = $("#target"), temp = " "; myScroll = new IScroll(‘#wrapper‘, { probeType: 3, mouseWheel: true }); myScroll.on("scroll", function() { var y = this.y, maxY = this.maxScrollY - y, downHasClass = downIcon.hasClass("reverse_icon"), upHasClass = upIcon.hasClass("reverse_icon"); if (y >= 40) { !downHasClass && downIcon.addClass("reverse_icon"); return ""; } else if (y < 40 && y > 0) { downHasClass && downIcon.removeClass("reverse_icon"); return ""; } if (maxY >= 40) { !upHasClass && upIcon.addClass("reverse_icon"); return ""; } else if (maxY < 40 && maxY >= 0) { upHasClass && upIcon.removeClass("reverse_icon"); return ""; } }); //下拉逻辑在这里! myScroll.on("slideDown", function() { if (this.y > 40) { window.location.reload(); } }); //上拉逻辑在这里! myScroll.on("slideUp", function() { if (this.maxScrollY - this.y > 40) { pushData(); myScroll.refresh(); } }); })(window)

 

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战