🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
> 无刷新点击实现加载更多数据 # html代码 ~~~ <div class="row row-zmo"> <div class="col-xs-12 col-md-12 row-more"> <a href="javascript:;" onclick="lmore()"> <p> + 展开更多案例 + </p> </a> </div> </div> ~~~ # jquery代码 ~~~ var cid = "<?php echo $cid?>"; i = 2; //当前页数 var domain = window.location.host; //域名 var url_dom = "http://"+domain+"/index.php?g=portal&m=list&a=more"; function lmore() { $.getJSON(url_dom, {page: i,cid: cid}, function(json) { if (json) { var str = ""; $.each(json, function(index, array) { var id = array['tid']; var cid = array['term_id']; var im = array['thumb']; var url = window.location.pathname ; // 路径 var full = url+"?g=&m=article&a=index&id="+id+"&cid="+cid; //完整的详情路径 var str = ""; var str = str + "<div class='col-xs-12 col-md-6 case-bos'>" +"<a href='"+ full +"' class='thumbnail case-thumbnail'>" + "<div class='inner'></div>" + "<div class='ibar'>" + "<e>" + array['post_title'] + "</e><br><e>" + array['claname'] + "</e></div>" + "<img src='/data/upload/"+ array['thumb'] +"' />" + "<div class='col-xs-3 col-md-3 case-but'><p>" + "查看案例" + "</p></div></a></div>"; $(".lists-img").append(str); $(".case-bos").hover( function(){ id=$(this).index(); $(".inner").eq(id).fadeIn(200); }, function(){ $(".inner").eq(id).fadeOut(200); } );  }); } else { showEmpty(); } }); i++; } function showEmpty() { $(".row-more").find("p").text("别滚动了,已经到底了... ..."); } ~~~ # php代码 ~~~ public function more(){ $page = intval($_GET['page']); //获取请求的页数 $cid = intval($_GET['cid']); //分类id $pagenum = 8; //每页数量 $start = ($page - 1) * $pagenum; $tag = "order:post_date desc;limit:$start,$pagenum"; $result = sp_sql_posts_bycatid($cid,$tag); foreach ($result as &$value) { $value['smeta']=json_decode($value['smeta'], true); $value['thumb']=$value['smeta']['thumb']; $term_id=$value['term_id']; $term=sp_get_term($term_id); $value['claname']=$term['name']; } if ($result) { echo json_encode($result,true); //转换为json数据输出 } } ~~~