iscroll-probe 下拉刷新，下拉加载

需要注意的是外部wrapper的高度，以及all的高度，须是>100%。

附加一个css3 的loading

.dengl-spinner {
    width: 0.682rem;
    height:  0.682rem;
    position: relative;
    position: absolute;
    z-index: -1;
    left: 50%;
    margin-left: -0.341rem;
    top: 2.5rem;
}
.dengl-spinner1{
    width: 0.682rem;
    height:  0.682rem;
    position: relative;
    position: fixed;
    z-index: -1;
    left: 50%;
    margin-left: -0.341rem;
    bottom: 1.5rem;
}
.dengl-cube1, .dengl-cube2 {
    background-color: #f2513f;
    width: 0.682rem;
    height:  0.682rem;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: cubemove 1.8s infinite ease-in-out;
    animation: cubemove 1.8s infinite ease-in-out;
}

.dengl-cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
    25% {
        -webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5)
    }
    50% {
        -webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg)
    }
    75% {
        -webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5)
    }
    100% {
        -webkit-transform: rotate(-360deg)
    }
}

@keyframes cubemove {
    25% {
        transform: translateX(1rem) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translateX(1rem) translateY(1rem) rotate(-179deg);
        -webkit-transform: translateX(1rem) translateY(1rem) rotate(-179deg);
    }
    50.1% {
        transform: translateX(1rem) translateY(1rem) rotate(-180deg);
        -webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg);
    }
    75% {
        transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

上下两个

<div class="dengl-spinner" style="top:17rem">
    <div class="dengl-cube1"></div>
    <div class="dengl-cube2"></div>
</div>

<div class="dengl-spinner1" style="bottom:3rem;">
    <div class="dengl-cube1"></div>
    <div class="dengl-cube2"></div>
</div>

下面是正文

 <style>
        #wrapper {
            position: absolute;
            width: 100%;
            z-index: 1;
            top: 16.1rem;
            bottom: 2rem;
            left: 0;
            overflow: hidden;
        }

        #all {
            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;
            background: #fff;
            min-height: 100.5%;
        }
    </style>

 <div id="wrapper">
                        <ul id="all"></ul>
                    </div>

var index = 2, size = 10;
        $(function () {
            $.qr.ajax('UserCenter/myJdAndMl', { token: $.qr.gettoken() }, function (d) {
                var vm1 = new Vue({
                    el: '#top_1',
                    data: {
                        money: d.data_single.money
                    }
                });
                var vm2 = new Vue({
                    el: '#top_2',
                    data: {
                        earnings: d.data_single.earnings,
                        has_catfood: d.data_single.has_catfood,
                        not_catfood: d.data_single.not_catfood
                    }
                });
            });
            var myScroll = new IScroll('#wrapper', {
                mouseWheel: false,
                bounceTime: 1000,
                bounceLock: true,
                probeType: 3
            });
            var handle = 0;
            myScroll.on('scroll', function () {
                if (this.y > 50) {
                    handle = 1;
                } else if (this.y < (this.maxScrollY - 50)) {
                    handle = 2;

                };
            });
            myScroll.on('scrollEnd', function () {
                if (handle == 2) {
                    add(index, size);
                } else if (handle == 1) {
                    add(1, size);
                }
                handle = 0;
                myScroll.refresh();
            });
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            add(1, size);
        });
        function add(pindex, psize) {
            $.qr.ajax('UserCenter/maoliangRecordList',
                { token: $.qr.gettoken(), pagesize: psize, pageindex: pindex }, function (d) {
                    var _h = '';
                    if (pindex != 1 && d.data_list.data_list.length > 0) index++;
                    if (d.data_list.data_list.length == 0) return false; 
                    $(d.data_list.data_list).each(function (i, j) {
                        _h += '<li>';
                        _h += '<div class="info" style="left: 10%">' + j.name + '</div>';
                        _h += '<div class="info">' + j.num + '</div>';
                        _h += '<div class="info">' + j.time + '</div>';
                        _h += '</li>';
                    });
                    if (pindex == 1) $('#all').empty();
                    $('#all').append(_h);

                }, false);

        }

 

转载于:https://www.cnblogs.com/jmzs/p/7088055.html