Thinkphp 中利用js,ajax写的无限下拉加载效果

14 篇文章 0 订阅
4 篇文章 0 订阅

控制器代码:

 public function index(){
			$news = M('System_voice');
			$news2=M('System_voice')->where(array('status'=> 1))->select();
			$category = D('System_voice_category')->where(array('status'=> 1))->order('sort DESC')->select();
			$condition_news['category_id'] = $category[0]['id'];
			$condition_news['status'] = 1;

			//$page = $_GET['page'] ? intval($_GET['page']) : 1;
			$news = M('System_voice');
			$return['count'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->count();
			if($return['count'] > ($page-1)*20){
				//$return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*5).',5')->select();
				$return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit(5)->select();
			}else{
				$return['news_list'] = array();
			}
			$return['totalPage'] = ceil($return['count']/5);
			$key = array_search($condition_news['category_id'],$category);
			$this->assign('news2',$news2);
			$this->assign('now_cat',$category[$key]['name']);
			$this->assign("category",$category);
			$this->assign("now_cat_id",$category[0]['id']);
			$this->assign("count",$return['count']);
			$this->assign("news_list",$return['news_list']);
			$this->assign("news_list_size",sizeof($return['news_list']));
			$this->display();
		}
public function ajax_index(){
			$news = M('System_voice');
			$news2=M('System_voice')->where(array('status'=> 1))->select();
			$category = D('System_voice_category')->where(array('status'=> 1))->order('sort DESC')->select();
			$condition_news['category_id'] = $category[0]['id'];
			$condition_news['status'] = 1;
			$page = $_REQUEST['page'] ? intval($_REQUEST['page']) : 1;
			//var_dump($page);
			$news = M('System_voice');
			$return['count'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->count();
			if($return['count'] > ($page-1)*5){
				//$return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*5).',5')->select();
				$return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*5).',5')->select();
			}else{
				$return['news_list'] = array();
			}
			$ocount=$return['count']%5;
			$return['totalPage'] = ceil($return['count']/5);
			$key = array_search($condition_news['category_id'],$category);
			//exit(json_encode(array('error_code'=>0,'error_reason'=>'获取成功','result'=>$return['news_list'])));
			$this->assign("news_list",$return['news_list']);
			$this->assign("ocount",$ocount);
			//$this->assign("totalPage",$return['totalPage']);
			$this->display();
		}
public function ajaxList(){
			$this->header_json();
			$totalRows=15;
			$page = $_GET['page'] ? intval($_GET['page']) : 1;
			$news = M('System_voice');
			$return['count'] = $news->where(array('category_id'=>$_GET['cat_id'],'status'=>'1'))->count();
			if($return['count'] > ($page-1)*$totalRows){
				$return['news_list'] = $news->where(array('category_id'=>$_GET['cat_id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*$totalRows),$totalRows)->select();
			}else{
				$return['news_list'] = array();
			}
			$return['totalPage'] = ceil($return['count']/10);
			echo json_encode($return);
		}
视图代码:index.php

<?php if(!defined('PigCms_VERSION')){ exit('deny access!');} ?>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name='apple-touch-fullscreen' content='yes'/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<meta name="format-detection" content="telephone=no"/>
		<meta name="format-detection" content="address=no"/>
		<link rel="stylesheet" type="text/css" href="{pigcms{$static_path}css/common.css?210"/>
		<link rel="stylesheet" type="text/css" href="{pigcms{$static_path}css/village.css?213"/>
		<script type="text/javascript" src="{pigcms{:C('JQUERY_FILE_190')}" charset="utf-8"></script>
		
		<script type="text/javascript" src="{pigcms{$static_path}js/idangerous.swiper.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="{pigcms{$static_path}js/fastclick.js" charset="utf-8"></script>
		<script type="text/javascript" src="{pigcms{$static_path}/layer/layer.m.js" charset="utf-8"></script>
		<script type="text/javascript" src="{pigcms{$static_path}js/common.js?210" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="http://localhost/tpl/Wap/pure/static/raty/jquery.raty.css"/>
		<script type="text/javascript" src="http://localhost/tpl/Wap/pure/static/raty/jquery.raty.js" charset="utf-8"></script>
		<script type="text/javascript">
			var location_url = "{pigcms{:U('Systemvoice/ajaxList')}";
			var backUrl = "{pigcms{:C('config.site_url')}/wap.php";
			var now_cat_id = "{pigcms{$now_cat_id}";
			var count = "{pigcms{$count}";
		</script>
		<script type="text/javascript" src="{pigcms{$static_path}js/newslist.js?215" charset="utf-8"></script>
		<style>
		    .title1{
				font-family:"Microsoft Yahei";
				letter-spacing:0.5px;
				color:#999;
				height:40px;
				overflow:hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
				padding-left:10px;
				padding-right:10px;
				padding-top:5px;
				padding-bottom:5px;
			}
			 .title2{
				font-family:"Microsoft Yahei";
				letter-spacing:0.5px;
				color:black;
				white-space: nowrap; 
				overflow: hidden; 
				text-overflow: ellipsis;
				padding-right:30px;
				padding-top:10px;
				padding-bottom:10px;
			}
			.title3{
				font-family:"Microsoft Yahei";
				letter-spacing:0.5px;
				color:#999;
				padding-left:10px;
				padding-right:10px;
				padding-top:10px;
				padding-bottom:15px;
			}
			#container{
				background-color:230, 229, 235;
			}
			.newsListBox dd div{
				padding-left:12px;
				padding-right:20px;
				margin-right:30px;
				overflow:hidden;
				word-break:keep-all;
				white-space:nowrap;
				text-overflow:ellipsis;
				font-size:12px;
				margin-bottom: 0px;
				margin-top: 0px;
				padding-top: 10px;
				padding-bottom: 0px;
			}
			#co{
				color:#999;
			}
			.conhr{
				border-radius: 15px;
				background-color:#F7F7F7;
				border-bottom: 1px solid #f1f1f1;
				margin-right:10px;
				margin-left:10px;
				margin-bottom: 10px;
				margin-top: 0px;
			}
			.conhr dd{
				margin-top:12px;
				border-radius: 15px;
				background-color:#F7F7F7;
				font-family:"Microsoft Yahei";
				letter-spacing:1px;
				margin-bottom: 0px;
				margin-top: 0px;
				padding-top: 0px;
				padding-bottom: 0px;
			}
			body{
				margin:0 auto;
				padding:0 auto;
			} 
			#co2{
				color:#999;
				height:40px;
				overflow:hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
				font-family:"Microsoft Yahei";
				letter-spacing:1px;
			}
			#ljdiv{
				margin:0;
				padding:0;
			}
			#coo{
				padding: 10px 6px;
			}
		</style>
	</head>
	<body>
    <if condition="!$is_app_browser">
        <header style="display:none"><div id="backBtn"></div>语音导游</header>
    </if>
		<div id="container">
			
				<div id="pullDown">
					<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新页面</span>
				</div>
				<section class="villageBox newsBox newsListBox">
					<div class="headBox newsheader" style="width:0px; height:0px;">
						<div class="swiper-container swiper-container1">
							<ul class="swiper-wrapper">
								<volist name="category" id="vo">
									<li hidden class="swiper-slide <if condition="$i eq 1">on</if>" data-cat_id="{pigcms{$vo.id}"></li>
								</volist>
							</ul>
						</div>
					</div>
					<!--<dl id="dl2">
						<volist name="news_list" id="vo">
							<dd data-url="{pigcms{:U('Systemvoice/news',array('id'=>$vo['id']))}">
								<div>{pigcms{$vo.title}</div>
							</dd>
						</volist>
					</dl>-->
				
				</section>
				<input type="hidden" value="{pigcms{$news_list_size}" id="count1">
				<input type="hidden" value="{pigcms{$count}" id="count">
				<volist name="news_list" id="vo">
				<div style="background-color:white;width:96%;margin:0px auto;margin-top:5px;border-radius:5px;">
					<a href="{pigcms{$vo['lianjie']}"><div class="title2" style="padding-left:10px;"><img style="width:10px;height:15px;padding-right:12px;" src="./tpl/Wap/static/images/new_my/title_left.png"/><font style="font-size:17px">{pigcms{$vo['title']}</font><br /></div></a>
					<a href="{pigcms{$vo['lianjie']}"><div><img style="width:100%;" src="{pigcms{$vo['img4']}" /></div></a>
					<div class="title1">{pigcms{$vo['introduction']}</div> 
					<div class="title3">
						<div style="float:left;"><img class="sc" id="{pigcms{$vo['id']}" onClick="sc(this)" style="width:15px;height:15px;padding-left:0px;margin-left:0px;" src="./tpl/Wap/static/images/new_my/like.png"/>  <font id="fav{pigcms{$vo.id}" color="#CCCCCC">{pigcms{$vo['fav']}</font>  </div>
						<div style="float:left; margin-left:40px;"> <div class="score" name="{pigcms{$vo['id']}" id="{pigcms{$vo['score']}"></div></div> 
						<div style="float:right;margin-right:20px"><a href="{pigcms{:U('Systemvoice/map2',array('id'=>$vo['id']))}"><img style="width:13px;height:13px" src="./tpl/Wap/static/images/new_my/ditudaohahng.png"/></a></div>
						<div style="clear:both;"></div>
					</div>
				</div>
				</volist>
				<input type="hidden" name="score" id="sc" value="5"/>

		</div>
		<script type="text/javascript">
		
			function sc(obj){
				var id = $(obj).attr("id");
				var fav = '#fav'+id;
				var num = parseInt($(fav).text())+1;
				$.ajax({   
					type:"POST",   
					url:"{pigcms{:U('Systemvoice/scajax')}",  
					data:"id="+id,  
					cache:false, //不缓存此页面   
					success:function(data){    
						$(fav).text(num);
					}  
				});
			}	
			$(document).ready(function(){
				$("#container").css('top','0px');
				var count = $("#count").val();
				var count2 = $("#count1").val();
				var count3 = count2 * 290+"px";
				$("#container").css('height',count3);
				var page = 2;
				$(window).scroll(function () {
					if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
						$.ajax({   
							type:"POST",   
							url:"{pigcms{:U('Systemvoice/ajax_index')}",  
							data: {page:page},
							dataType:'html', 
							cache:false, //不缓存此页面   
							success:function(msg){
								var ocount = $(msg).find("#ocount").val();
								var totalPage = $(msg).find("#totalPage").val();
								$("#container").append(msg);
								//var count4 = count2 * 290 * page+"px";
								var count5 = count * 290 +"px";
								$("#container").css('height',count5);
								page++;
							} 
						});
					}
				});
			})
			
			$("body").unbind("click");
			$("a").click(function(){
				var href = $(this).attr("href");
				window.location.href= href;
			});
			

			window.shareData = {  
				"moduleName":"Systemnews",
				"moduleID":"0",
				"imgUrl": "<if condition="$config['wechat_share_img']">{pigcms{$config.wechat_share_img}<else/>{pigcms{$config.site_logo}</if>", 
				"sendFriendLink": "{pigcms{$config.site_url}{pigcms{:U('Systemnews/index')}",
				"tTitle": "平台快报 - {pigcms{$config.site_name}",
				"tContent": "点击查看快报详细内容"
			};
			$.fn.raty.defaults.path = 'http://www.97farm.com/tpl/Wap/bluesky/static/raty/images';
			//$('.score').raty({readOnly: true,score:2.5});
			$('.score').each(function(i,e){
				var v = $(this).attr("id");
				$(this).raty({score:v,
					click: function(score, evt) {
						var id = $(this).attr("name");
						$.ajax({   
							type:"POST",   
							url:"{pigcms{:U('Systemvoice/pfajax')}",  
							data: {id:id,score:score},
							cache:false, //不缓存此页面   
							success:function(data){    
								//$("#sc").val(score);
							} 
						});
						//alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
						$("#sc").val(score);
					}
				});
			});
		</script>
		{pigcms{$shareScript}
	</body>
</html>
ajax_index.php页面

<html>
	<head>
		<title>测试1</title>
	</head>
	<body>
		<volist name="news_list" id="vo">
				<div style="background-color:white;width:96%;margin:0px auto;margin-top:5px;border-radius:5px;">
					<a href="{pigcms{$vo['lianjie']}"><div class="title2" style="padding-left:10px;"><img style="width:10px;height:15px;padding-right:12px;" src="./tpl/Wap/static/images/new_my/title_left.png"/><font style="font-size:17px">{pigcms{$vo['title']}</font><br /></div></a>
					<a href="{pigcms{$vo['lianjie']}"><div><img style="width:100%;" src="{pigcms{$vo['img4']}" /></div></a>
					<div class="title1">{pigcms{$vo['introduction']}</div> 
					<div class="title3">
						<div style="float:left;"><img class="sc" id="{pigcms{$vo['id']}" onClick="sc(this)" style="width:15px;height:15px;padding-left:0px;margin-left:0px;" src="./tpl/Wap/static/images/new_my/like.png"/>  <font id="fav{pigcms{$vo.id}" color="#CCCCCC">{pigcms{$vo['fav']}</font>  </div>
						<div style="float:left; margin-left:40px;"> <div class="score" name="{pigcms{$vo['id']}" id="{pigcms{$vo['score']}"></div></div> 
						<div style="float:right;margin-right:20px"><a href="{pigcms{:U('Systemvoice/map2',array('id'=>$vo['id']))}"><img style="width:13px;height:13px" src="./tpl/Wap/static/images/new_my/ditudaohahng.png"/></a></div>
						<div style="clear:both;"></div>
					</div>
				</div>
				</volist>
		<span>
			<input type="hidden" id="ocount" value="{pigcms{$ocount}"/>
			<input type="hidden" id="totalPage" value="{pigcms{$totalPage}"/>
		</span>
		<script>
			$.fn.raty.defaults.path = 'http://www.97farm.com/tpl/Wap/bluesky/static/raty/images';
				//$('.score').raty({readOnly: true,score:2.5});
				$('.score').each(function(i,e){
					var v = $(this).attr("id");
					$(this).raty({score:v,
						click: function(score, evt) {
							var id = $(this).attr("name");
							$.ajax({   
								type:"POST",   
								url:"{pigcms{:U('Systemvoice/pfajax')}",  
								data: {id:id,score:score},
								cache:false, //不缓存此页面   
								success:function(data){    
									//$("#sc").val(score);
								} 
							});
							//alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
							$("#sc").val(score);
						}
					});
				});
				$("body").unbind("click");
					$("a").click(function(){
					var href = $(this).attr("href");
					window.location.href= href;
				});
		</script>
	</body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ougexingfuba

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值