滚屏无刷新动态加载数据问题?

依依雨柔
  • 233
初始画页面时加载所有数据:
$(document).ready(function(){ 
var counter=0;
    var pageStart=1;
    var pageSize=10;
    var isEnd=false;
    getData(pageStart,pageSize);
    function getData(offset,size){
        $.ajax({
            url: ,
            type: 'GET',
            async: true, 
            dataType:'json',
            contentType:"application/json; charset=utf-8", 
            success: function(data){
                respon=data.data.result;
                var sum=respon.length;
                for(var i=(offset-1)*size;i<sum;i++){
                    creatDiv(respon,i); //将数据依次填入新建的div中
                }
                if(((offset-1)*size+sum)===data.data.total){
                    $('.noMoreData').show().html("没有更多数据了!");
                    isEnd=true;
                    return isEnd;
                  }
            },
            error: function(err){
            } 
        });
        $(window).scroll(function(){
            if(isEnd==true){
                return;
            }
         if($(document).height()-$(window).scrollTop()-$(window).height()<100){
                console.log("距离底部100px")
                pageStart++;
                getData(pageStart,pageSize);
            }
        })    
        

})
搜索时按条件加载:

function search(){
    $('.personInfo').empty();
    var counter=0;
    var index=1;
    var pageSize=10;
    var isEnd = false;
    searchData(index,pageSize);
    
    function searchData(pageIndex,eachPageSize){
        $.ajax({
            url:,
            type:'post',
            async:true,
            dataType:'json',
            data:{
                    index:pageIndex,
                    pageSize:eachPageSize,
                    name:$('#name').val(),
                 },
            success:function(data){
                if(data.status==0){
                    if(data.data.total!=0){
                        $('#total').empty();
                        $('#total').html(data.data.total);
                        respon=data.data.result;
                        if(respon.length!==0){
                            var sum=respon.length;
                            for(var i=0;i<sum;i++){
                              creatDiv(respon,i);
                            }
                            if(((pageIndex-1)*eachPageSize+sum)===data.data.total){
                                isEnd=true;
                         ('.noMoreData').show().html("没有更多数据了!");
                            }
                            $(window).scroll(function(){
                                if(isEnd==true){
                                    return;
                                } if($(document).height()-$(window).scrollTop()-$(window).height()<100){
                                    index++;
                                    searchData(index,pageSize);
                                }
                            })
                        };
                    }else{
                       console.log("无符合条件的数据")
                }else{
                    console.log(data.message);
                };
            },
            error:function(data){
                console.log('err'); 
            }
        })
    } 
}

想要的效果是初始时显示所有数据,搜索时显示出符合条件的数据,两者均动态加载更多数据,但现在搜索时滚动条下滑时会触发初始化的加载更多的接口,导致数据重复加载了

回复
阅读 1.2k
1 个回答

很简单,定义一个全局变量。
当初始加载的时候,让变量等于true,
当搜索的时候,变量为false,
然后,加载更多的时候判断这个变量的状态选择执行getData()还是searchData();

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏