王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
实现h5页面拉到底部自动加载内容,再也不用点击下一页了
php方法
<?php
//模板单机显示更多
public function mubanlist(){
$cid=intval($_POST[cid]);//cid类别
$length=intval($_POST[length]);//length单个长度
$alllength=intval($_POST[alllength]);//alllength所有长度
if(!$cid){
$data['msg'] = '非法传值！';
$data['result'] = 0;
echo json_encode($data);
}else{
$listarr=$this->get_child_id($cid);
//dump($listarr);
//获取行数
if ($length == 0 ) {
$limit = $alllength . ',' . 6;//显示所有
$condition = 'cid in (' . $listarr . ') and status=1'; //显示子项全部内容
} else {
$limit = $length . ',' . 6;//显示当前类别所有
$condition = 'cid=' . $cid . ' and status=1'; //显示子项全部内容
}
// dump($condition);
$data['list']=$this->model->field('pic,title,cid,url,tags,hits,id')->table('post')->where($condition)->limit($limit)->order('id desc')->select();
if (is_array($data['list'])) {//处理链接
foreach ($data['list'] as $key => $vo) {
if (empty($vo['url'])) {
$fileName = empty($vo['ename']) ? '' : '/' . $vo['ename'];
$data['list'][$key]['url'] = __URL__ . '/content/' . $vo['id'] . $fileName . $this->config['URL_HTML_SUFFIX'];
}
}
}
//dump($data);
if($data['list']){
$data['result'] = 1;
echo json_encode($data);}
else{
$data['msg'] = '已经全部显示！';
$data['result'] = 0;
echo json_encode($data);
}
}
}
?>
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="wrap">
<ul id="case_list">
<?php
$list = module('public')->get_post_list(29,6);
if(is_array($list)) foreach($list as $vo) {?>
<li class="portfolio case{$vo['cid']}" data-cat="case{$vo['cid']}">
<div class="portfolio-wrapper">
<a href="{$vo['url']}" class="b-link-stripe b-animate-go">
<img src="/cgonet{$vo['pic']}" />
<div class="b-wrapper"><div class=" b-animate b-from-left"><img src="__TPL__/images/cgo_ind6.png" alt=""/><p>{$vo['title']}</p></div></div>
</a>
</div>
<div class="portfolio-text">
<span>模版编号：{$vo['tags']}</span>
<a href="javascript:void(0);" class="buy" rel="{$vo['id']}">我要购买</a>
<font class="eye">{$vo['hits']}</font>
</div>
</li>
<?php }?>
</ul>
</div><!-- wrap-->
</body>
</html>
script
<script type="text/javascript">
$(window).scroll(function(){
//判断是否滑动到页面底部
if($(window).scrollTop()== $(document).height() - $(window).height()){
// TODO 滑动到底部时可请求下一页的数据并加载，加载可使用append方法
var cid=$(this).attr("rel");
var length=$(".case"+cid).length;//每个分类的个数
var alllength=$("#case_list li").length;//总个数
//AJAX异步更改数据库
$.post("__APP__/default/mubanlist.html", {cid: cid, length: length,alllength:alllength}, function(data) {
if (data.result == 0) {
//asyncbox.error(data.msg,'Error Message');
$("a.more").hide();
} else {
//先清除缓存
$("#case_list").html="";
if(data.list.length<6){
$("a.more").addClass("empty");
$("a.more").hide();
}
//for( i in data.list){
for ( var i = 0; i < data.list.length; i++ ) {
var html = "";
html +="<li style='display: inline-block; opacity: 1;' class=' portfolio ";
html +=" case"+data.list[i].cid+" ";
html +=" mix_all '" ;
html +=" data-cat='";
html +=" case"+data.list[i].cid+"' >";
html +=" <div class='portfolio-wrapper'>";
//html +=" <a href='"+data.list[i].url+"' class='b-link-stripe b-animate-go' target='blank' >";
html +=" <a href='"+data.list[i].url+"' class='b-link-stripe b-animate-go'>";
html +=" <div class='b-line b-line1'></div><div class='b-line b-line2'></div><div class='b-line b-line3'></div><div class='b-line b-line4'></div><div class='b-line b-line5'></div>";
html +=" <img src=/cgonet"+data.list[i].pic+" style='top: 0px;' />";
html +=" <div class='b-wrapper'><div class=' b-animate b-from-left'> ";
html +=" <img src='__TPL__/images/cgo_ind6.png' style='top: 0px;'/> ";
html +="<p>"+data.list[i].title+"</p></div></div></a></div>";
html +=" <div class='portfolio-text'>";
html +=" <span>模版编号："+data.list[i].tags+"</span>";
html +=" <a href='javascript:void(0);' class='buy' rel="+data.list[i].id+">购买</a>";
html +="<font class='eye'>"+data.list[i].hits+"</font></div>"
html +="</li> ";
//alert(html);
$("#case_list").append(html);
}
}
},'json');
}
});
</script>
