移动端上拉加载demo

来源：互联网发布：网络游戏破解软件大全编辑：程序博客网时间：2024/06/16 20:20
//引用<script src="/js/4.2.5iscroll.js"></script>//html<div class="wrap" id="#wrapper">    <div class="main_list">        <div class="other_list">         //循环开始            <ul>....</ul>            <ul>....</ul>            ...        //循环结束            </div>        <div class="more" abc="">            <div class="more_center">                <i class="pull_icon"></i><span>上拉加载...</span>            </div>        </div>     </div></div>//js<script>    var kp = '{{ $datas['skip'] }}';//初始为1---作用防止多次连续上拉重复加载    $(".more").attr("abc",kp);//储存起来    /*滚动*/    var myscroll = new iScroll("#wrapper",{        onScrollMove:function(){            if (this.y<(this.maxScrollY)) {                $('.pull_icon').addClass('flip');                $('.pull_icon').removeClass('loading');                $('.more span').text('释放加载...');            }else{                $('.pull_icon').removeClass('flip loading');                $('.more span').text('上拉加载...')            }        },        onScrollEnd:function(){            if ($('.pull_icon').hasClass('flip')) {                $('.pull_icon').addClass('loading');                $('.more span').text('加载中...');                pullUpAction();            }        },        onRefresh:function(){            $('.more').removeClass('flip');            $('.more span').text('上拉加载...');        }    });    function pullUpAction(){        var skip=$(".more").attr("abc");        $.ajax({            url: '',            type: 'post',            headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},            data: {                skip: skip            },            dataType: 'json',            success: function (data) {                if(data.success){                    $(".more").attr("abc",data.info.skip);                    var obj = Object.keys(data.info.products)                    if(obj.length > 0){                        var arr=data.info.products;                        var path = '{{ env('CDN_DOMAIN_NAME') }}';                         var html="<ul>....</ul>"                           $('.other_list').append(html)                    }else{                        $(".more_center").empty();                        $(".more_center").text("我是有底线的");                    }                    myscroll.refresh();                }else{                }            }        });    }    if ($('.main_list').height()<$('.wrap').height()) {        $('.more').hide();        myscroll.destroy();    }</script>
阅读全文
0 0