//引用
<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>
