改进版增加可以再重定义模板功能

如果携带template参数，则需要定义一个template的函数方法，然后把ajax获取到的内容再函数里面执行输出！

写一个js判断溢出层是否到底部的ajax新闻无限加载类组件写法

首先是判断是否到达层底部，这里有个问题就是层要固定高度，其次初始第一次加载的内容的高度一定要大于这个高度，不然滚不了！

代码如下

var  loadingMore = false;//增加判断是否直接加载
var  page=1;
$('.no-loadings').hide();//隐藏到底部显示的层
listajax(1,'news',3,4,'',template);//执行初始的第一次加载
$(".list-jz").scroll(function(e){
    var h = $(this).height();//div可视区域的高度
    var sh = $(this)[0].scrollHeight;//滚动的高度，$(this)指代jQuery对象，而$(this)[0]指代的是dom节点
    var st =$(this)[0].scrollTop;//滚动条的高度，即滚动条的当前位置到div顶部的距离
    if(h+st>=sh && !loadingMore){
    //上面的代码是判断滚动条滑到底部的代码
      //alert("滑到底部了");
      loadMore();//滚动条滑到底部时，只要继续滚动滚动条，就会触发这条代码.一直滑动滚动条，就一直执行这条代码。
    }
  })

然后就是loadMore的部分

function template(e,dom){
$.each(e,function(i,obj){ 
            var list="1";
                 console.log(list)
            list+="<li c><a href="+obj['arcurl']+">";
            list+="<div class='img'><img src="+obj['cfg_basehost']+obj['litpic']+"></div>"
            list+="<div class='txt'>";
            list+="<h3>"+obj['title']+"<span></span></h3>";
            list+="</div></a></li>"
            dom.append(list); 
         });
           
}
function loadMore() {
        if (loadingMore) return;
        loadingMore = true;
        page++;
        console.log(page);
        setTimeout(//增加延迟，防止一直不间断滚动
            () => {
                this.listajax(page,'news',3,4, () => {  
                  loadingMore = false;
                },template)
            }, 333
        )
    }

最后是类似组件调用加载的部分

//page是页码 ,id是栏目id pagesize是每页个数  cb是是否执行 dom是需要操作的id /template是需要替换的模板
function listajax(page,dom,id,pagesize,cb,template){
  var tid=id || 3;//获取id
  var page=page || 1;//获取页码
  var pagesize=pagesize || 4;//获取每页个数
  var dom=$("#"+dom) || $("#news");//获取dom
  $.ajax({
    url: 'https://www.csgt120.com/plus/list_ajax.php',
    type: 'GET',
    dataType: 'json',
    data: {
      ajax:'ss',
      typeid:tid,
      page:page,
      pagesize:pagesize
    },
    success:function(e){
        if(e.data){
        if(template){//判断是否有模板导入，如果没有则执行默认的模板方式
          console.log(e.data);
             template(e.data,dom);
          }else{
         $.each(e.data,function(i,obj){ 
            var list="";
            list+="<li "+i+"><a href="+obj['arcurl']+">";
            list+="<div class='img'><img src="+obj['cfg_basehost']+obj['litpic']+"></div>"
            list+="<div class='txt'>";
            list+="<h3>"+obj['title']+"<span></span></h3>";
            list+="</div></a></li>"
            dom.append(list); 
         });
         }
       }else{
        $('.my-loading').hide();
        $('.no-loadings').show();
       }
        if (cb!='') {
               cb()
              }
    }
  })
  .fail(function() {
    console.log("error");
  })

}