首先后台需要支持ajax 

然后写好调用的组件

//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: '/plus/list_ajax.php',
    type: 'GET',
    dataType: 'json',
    data: {
      ajax:'ss',
      typeid:tid,
      page:page,
      pagesize:pagesize
    },
    success:function(e){
      console.log(e);
        if(e.data.length>0){
        if(template){//判断是否有模板导入，如果没有则执行默认的模板方式
             template(e.data,dom);
                 if (cb!='') {
               cb()
              }
          }else{
         $.each(e.data,function(i,obj){ 
            var list="";
            list+="<li><a href="+obj['arcurl']+">";
            list+="<div class='img'><img src="+obj['cfg_basehost']+obj['litpic']+"></div>"
            list+="<div class='txt'>";
            list+="<h5>"+obj['title']+"<span></span></h5>";
            list+="</div></a></li>"
            dom.append(list); 
            $('.my-loading').hide();
         });
             if (cb!='') {
               cb()
              }
         }
       }else{
        $('.my-loading').hide();
        $('.no-loadings').show();
        $('.jz').hide();
       }
    
    }
  })
  .fail(function() {
    console.log("error");
  })

}

把文件保存为ajax.js

然后我们是需要前台代码

<script type="teXt/javascript" src="/basic/js/ajax.js"></script>
<script type="text/javascript">
  var loadingMore = false;//增加判断是否直接加载
  var page=1;
  var typeid = "{dede:field.typeid/}";
    $(function(){
        $('.jz').click(function(event) {
            /* Act on the event */
            console.log(loadingMore);
        if(!loadingMore){
          $('.my-loading').show();
          loadMore();
        }
        });

function loadMore() {
            if (loadingMore) return;
            loadingMore = true;
            page++;
            setTimeout( //增加延迟，防止一直不间断点击
                () => {
                    this.listajax(page, 'shop', typeid, 8, () => {//shop为需要加入内容的层的id 名字 
                        loadingMore = false;
                    })
                }, 333
            )
        }

    })


</script>

加载更多点击后状态部分

  <div class="loadmore">
                        <div class="my-loading">
                          
                        </div>
                        <div class="no-loadings">
                          <div class="no-loadings-flex">
                            
                          
                            <p>没有更多内容了</p>
                            </div>
                        </div>
                    </div>

加载更多状态部分的less

.loadmore { padding: 10px 0;
  .my-loading,.no-loadings{display: none;}
}

.my-loading{width: 100%; height: 0rpx; .tc;
  .flex-block();.align-items(center);.justify-content(center);
  padding-top:24rpx;.transition(all 200ms linear);}
.loadmore.visible { height: 80rpx;}
.my-loading:after {
  content: " "; .dis-in;width: 26px;
  height: 26px;margin: 1px;border-radius: 50%;
  border: 2px solid #FFD800;border-color: #eee #efefef #FFD800 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.no-loadings{    
  .flex-block();.align-items(center);margin-top: 15px;
font-size: 12px; color: #999;
}
.no-loadings-flex{
  .flex-block();.align-items(center); width: 100%;
  &:after,&:before{
.flex(1);width: 100px;height: 1px; background:#ccc;content: "";
}
}
.no-loadings p{padding: 0px 6px;}

好了可以了！ 

如果需要不同的模板 loadMore的时候传递前端模板方法过去

function loadMore() {
            if (loadingMore) return;
            loadingMore = true;
            page++;
            setTimeout( //增加延迟，防止一直不间断点击
                () => {
                    this.listajax(page, 'shop', typeid, 8, () => {//shop为需要加入内容的层的id 名字 
                        loadingMore = false;
                    },template)
                }, 333
            )
        }

    })

模板

function template(e,dom){
$.each(e,function(i,obj){ 
            var list="";
            list+="<li><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); 
         });
           
}