企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
html核心代码(主要给加载按钮一个id为loadmore,给新闻列表一个id为xinhao) ~~~ <div class="pull-left product-content-body wow bounceInLeft" > <div id="xinhao"> {volist name="alist" id="vo" empty="暂无该类信息~~" } <dl class="news-ajax clearfix"> <dt> <a href="{:url('details')}?id={$vo.id}&kid={$Request.param.kid}"><img src="__ROOT__/uploads/news/{$vo.image}"/></a> </dt> <dd> <h2><a href="{:url('details')}?id={$vo.id}&kid={$Request.param.kid}">{$vo.title}</a></h2> <p>{$vo.desc|mb_substr=0,100}</p> <div class="inft-txt">{$vo.create_time|date="Y-m-d",###} 蓝蝶</div> </dd> </dl> {/volist} </div> <div class="clearfix"></div> <div class="page-ajax"> <a class="loadmore" id="loadmore"><i></i>加载更多</button> </div> </div> ~~~ 操作器核心代码(index方法,主要$alist与$count;data方法为核心方法) ~~~ class News extends Base { //新闻首页 public function index() { $erjicaidan=db('news_cate')->order('sort desc,id asc')->select(); $alist=db('news')->order('sort desc,create_time desc')->limit(5)->select(); //获取记录数量 $count=db('news')->count(); $hotlist=Db::table('news')->order('pv desc')->limit(5)->select(); $this -> assign('alist',$alist); $this -> assign('count',$count); $this -> assign('hotlist',$hotlist); $this -> assign('erjicaidan',$erjicaidan); return $this->view->fetch('news/index'); } //加载更多 public function data() { $data = $this->request->param(); $start =$data['start']; $list = db('news')->limit($start, 5)->order('sort desc,create_time desc')->select(); return ['result'=>$list,'status'=>1, 'msg'=>'获取成功!']; } } ~~~ js核心代码 ~~~ {load href="/static/admin/js/jquery-1.11.1.min.js"/} <script> //加载更多 var nStart =5; var html=''; $('#loadmore').click(function() { var _this = $("#xinhao"); if(nStart >= {$count}) { //alert('后面没有数据了!'); $("#loadmore").html('没有数据了亲...').css({"color":"666","height":"30px","line-height":"30px"}); } else { //alert('还有数据!'); $.post("{:url('news/data')}", {start:nStart}, function(res) { $.each(res.result, function(i, item) { _this.append('<dl class="news-ajax clearfix">\ <dt>\ <a href="/index/news/details/id/'+item.id+'/kid/4.html"><img src="__ROOT__/uploads/news/'+item.image+'"/></a>\ </dt>\ <dd>\ <h2><a href="/index/news/details/id/'+item.id+'/kid/4.html">'+item.title+'</a></h2>\ <p>'+item.title+'</p>\ <div class="inft-txt">'+item.title+'蓝蝶</div>\ </dd>\ </dl>'); }); }); nStart += 5; } }); </script> ~~~ 参考文章 http://www.jb51.net/article/108108.htm