移动端上拉加载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>