欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动端上拉加载demo

程序员文章站 2022-07-14 17:06:18
...
//引用
<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>
相关标签: 移动