详情页

帝国CMS下拉加载更多升级版插件简介

时间:2024年04月01日

编辑:佚名

加载更多博主曾经多次折腾最终得出以下两个版本 适用于大多数项目
至于加载更多的gif 图片 请自己找素材吧
JS 调用部分 (栏目设置中 最好显示12条数据 匹配js拉取数据 且不重复  也可以自行设置测试条数)
本例按当前栏目拉取 适合列表页
<script>$(function(){        
var i = 1; //设置当前页数      
window.onscroll = function(){    
var scrollTop = document.body.scrollTop;    
var bot = 50; //bot是底部距离的高度        
if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {        
$.ajax({        
url : '/e/action/getmore.php',                
type:'POST',                
data:{"next":i,'table':'news','classid':'[!--self.classid--]','action':'getmorenews','limit':12,'small_length':120},            
dataType : 'html',        
beforeSend:function(){                
$("#loadmore").show().html('<img src="/images/loaduai.gif" width=23/>  正在努力加载中...');          
$('#loadmore').attr('disabled','disabled');        
},            
success : function(data){          
if(data){              
$("#showajaxnews").append(data);                          
$("#loadmore").removeAttr('disabled');              
$("#loadmore").html('下拉加载更多');                
i++;            
}else{                
$("#loadmore").show().html("已全部加载完毕!");                        
$('#loadmore').attr('disabled','disabled');                
return false;            
}                
}        
});    
}
}
});
</script>
容器和显示按钮 (showajaxnews)
<ul id="showajaxnews">
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
</ul>                
<!-- 资讯列表模板 --> 
<a class="go-more" id="loadmore">加载更多</a>
后端数据结构 (/e/action/getmore.php)
<?php
require('../class/connect.php');
require('../class/db_sql.php');
require('../data/dbcache/class.php');
if($_POST[action] == 'getmorenews'){
$table=htmlspecialchars($_POST[table]);
if(empty($_POST[orderby])){
$orderby='newstime';
}else{
$orderby=htmlspecialchars($_POST[orderby]);
}
if(empty($_POST[myorder])){
$myorder='desc';
}else{
$myorder='asc';
}
if(empty($_POST[limit])){
$limit=12;
}else{
$limit=(int)$_POST[limit];
}
if(empty($_POST[classid])){
$where=null;
}else{
$where='where classid in('.$_POST[classid].')';
}
if(empty($_POST[length])){
$length=50;
}else{
$length=(int)$_POST[length];
}
if(empty($_POST[small_length])){
$small_length=500;
}else{
$small_length=(int)$_POST[small_length];
}
$link=db_connect();
$empire=new mysqlquery();
$num =(int)$_POST['next'] *$limit;  
if($table){        
$sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");    
while($r=$empire->fetch($sql)){        
if($r[mtitlepic]==''){            
$r[mtitlepic]=$public_r[news.url]."e/data/images/notimg.gif";        
}    
$oldtitle=stripSlashes($r[title]);    
$title=sub($oldtitle,'',$length);    
$smalltext=stripSlashes($r[smalltext]);    
$smalltext=sub($smalltext,'',$small_length);    
$classname=$class_r[$r[classid]][classname];    
$newsurl=$public_r[newsurl];    
$classurl=$newsurl.$class_r[$r[classid]][classpath];    
$urls = sys_ReturnBqTitleLink($r); ?>                      
<li>                            
<a href="<?=$urls?>">                              
<div class="media-image">                                  
<img src="<?=$r[mtitlepic]?>" alt="<?=$r[title]?>" width=60 height=60 />                              
</div>                              
<div class="media-content">                                
<h3 class="title"><?=$r[title]?></h3>                                
<p class="meta">                                        
<span class="meta-time"><?=date("Y-m-d",$r[newstime])?></span>                                    
</p>                            
</div>                          
</a>                    
</li>
<?php    
}  
}}
db_close();
$empire=null;
?>
另一个版本 点击后再拉取数据 适合首页等部位按制定栏目拉取
 $(function(){          
var i = 1; //设置当前页数          
$('#loadmore').click(function(){        
$.ajax({        
url : 'http://m.78moban.com/e/action/getmore.php',                
type:'POST',                
data:{"next":i,'table':'news','classid':'14','action':'getmorenews','limit':12,'small_length':120},            
dataType : 'html',        
beforeSend:function(){                
$("#loadmore").show().html('<img  src="/images/loaduai.gif" width=23/>  正在努力加载中...');          
$('#loadmore').attr('disabled','disabled');        
},            
success : function(data){          
if(data){              
$("#showajaxnews").append(data);                          
$("#loadmore").removeAttr('disabled');              
$("#loadmore").html('点击加载更多');                
i++;            
}else{                
$("#loadmore").show().html("已全部加载完毕!");                        
$('#loadmore').attr('disabled','disabled');                
return false;            
}                
}        
});    
});
});
注意:
next:第几页
table:调用数据表
limit:每次调用数量
small_length:简介截取字符数
length:标题截取字符数
classid:调用栏目,允许多个,如1,2,3,4  特别注意,必须是调用同一数据表的栏目
orderby:排序,默认是newstime,传什么就按什么来排序,如 idmyorder:正反序,默认是asc,传值可为desc
本项目需要引入jq
博主使用的是jquery-1.8.3.min.js,使用者可以自行测试版本,不提供JQ文件。
相关文章
猜你需要