移动端上拉加载demo

//引用
<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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值