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

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

2024-09-14 12:52:43   223人阅读

上拉刷新，下拉加载更多。。。仿原生的效果----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实现上拉刷新，下拉加载更多，应用技巧项目实战


联系
我们