![]()
php獲取數據
<?php
$user_id = $_COOKIE['mmyx_o_id'];
$super_json = file_get_contents("https://****/ios/api/daren_post_list.php?mobile=51");
$supers = json_decode($super_json,true);//後臺獲取達人分類列表
$supers_cate = $supers['cate'];
$f_cate = file_get_contents("https://****/ios/api/daren_user_list.php?mobile=51&user_id=".$user_id."&medal_id=4&page=1&limit=10");//後臺默認分類下達人列表
$cate_info = json_decode($f_cate,true);
$frist_info = $cate_info['data'];
?>
html+css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0,telephone=no" />
<meta name="format-detection" content="telephone=no" />
<title>達人</title>
<script language="javascript">
var phoneWidth = parseInt(window.screen.width);var iwidth = 750;var phoneScale = phoneWidth/iwidth;var ua = navigator.userAgent;var os = 1;if (/Android (\d+\.\d+)/.test(ua)){var version = parseFloat(RegExp.$1);os = 2;if(version>2.3){document.write('<meta name="viewport" content="width='+iwidth+', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width='+iwidth+', target-densitydpi=device-dpi">')}} else {document.write('<meta name="viewport" content="width='+iwidth+', user-scalable=no, target-densitydpi=device-dpi">')}
</script>
<style type="text/css">
body{margin:0;padding:0;font-family:Arial;font-size:24px; background:#fff;}
ul,li,ol,dl,dt,dd,p,div,a{margin:0;padding:0;list-style:none}
a:hover{text-decoration:none}
.fix{width:100%;height:90px;position:fixed;top:0;left:0;}
.wrapper{width:100%;height:90px;overflow:hidden;position:relative;background:#fff;}
.scroller{position:absolute}
.clearfix{width:100%;height:70px;line-height:62px;font-size:28px;color:#222;padding-top:20px;border-bottom:14px solid #f3f3f3;}
.clearfix li{float:left;width:125px;text-align:center;}
.scroller li a{color:#222;width:125px;display:block;text-decoration:none}
.scroller li.cur a{color:#43cac3;border-bottom:8px solid #43cac3;}
.contant{width:92%;margin:90px auto 0;}
.contant li{width:100%;height:164px;padding:34px 0;border-bottom:1px solid #ddd;}
.head{float:left;width:140px;height:140px;border-radius:140px;overflow:hidden;margin-left:4px;}
.head img{width:100%;}
.mid{float:left;width:248px;margin-left:30px;overflow:hidden;}
.mid .name{font-size:30px;color:#4d4d4d;margin-top:10px;font-weight:bold;}
.kind{font-size:28px;color:#6d6d6d;line-height:66px;width:248px;height:66px;overflow:hidden;}
.num{font-size:24px;color:#a0a0a0;line-height:46px;}
.after{float:left;width:225px;}
.add{width:125px;height:48px;border:1px solid #24a40f;border-radius:13px;margin:42px 0 0 84px;text-align:center;font-size:28px;line-height:49px; color:#24a40f;}
.del{width:125px;height:48px;border:1px solid #bea183;border-radius:13px;margin:42px 0 0 84px;text-align:center;font-size:28px;line-height:49px; color:#bea183;}
.fan{font-size:24px;color:#a0a0a0;line-height:98px;}
.loading{clear:both;margin:0 auto;width:200px;text-align:center;color:#555;/*display:none;*/}
.loading i{display:inline-block;width:15px;height:15px;background:url(http://filebaby.qubaobei.com/box/images/phone/loading.png) no-repeat;background-size:15px 15px;animation:loading 0.8s linear infinite;-moz-animation:loading 0.8s linear infinite;-webkit-animation:loading 0.8s linear infinite;}
.loading span{margin-left:8px;}
</style>
</head>
<body>
<div class="fix">
<div class="wrapper" id="wrapper03">
<div class="scroller">
<ul class="clearfix">
<?php foreach($supers_cate as $v): ?>
<li><a href="javascript:void(0)" onclick="cateChange(<?php echo $v['id'] ?>)"><?php echo $v['name'] ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<ul class="contant" id="content">
<?php foreach($frist_info as $v): ?>
<li>
<div class="head" onclick="turnUserCenter(<?php echo $v['user_id'] ?>)"><img src="<?php echo $v['avatar']; ?>" /></div>
<div class="mid">
<div class="name" onclick="turnUserCenter(<?php echo $v['user_id'] ?>)"><?php echo $v['nickname']; ?></div>
<div class="kind">
<?php
foreach($v['daren'] as $k=>$d){
if($k==0){
echo $d['content'];
}else{
echo '.'.$d['content'];
}
}
?>
</div>
<div class="num">發帖量 <?php echo $v['post_num']; ?></div>
</div>
<div class="after">
<?php if($v['relate']): ?>
<div onclick="guanzhu(<?php echo $v['user_id']; ?>,this)" class="del">取消關注</div>
<?php else: ?>
<div onclick="guanzhu(<?php echo $v['user_id']; ?>,this)" class="add">+ 關注</div>
<?php endif;?>
<div class="fan">粉絲量 <?php echo $v['fans_num']; ?></div>
</div>
</li>
<?php endforeach; ?>
</ul>
<div id="more" class="loading"><i></i><span>正在加載...</span></div>
<script src="http://file2.ci123.com/ast/js/jquery_172.js" language="javascript"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/flexible.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/navbarscroll.js"></script>
<script type="text/javascript">
var user_id = "<?php echo $user_id; ?>";
var page = 2;
var medal = 4;
$(function(){
$('.wrapper').navbarscroll();
});
function turnUserCenter(qq_uid){
window.location='ios:mamabbs_user:'+qq_uid;
}
function guanzhu(to_uid,th) {
var uid ='<?php echo $user_id ?>';
if($(th).hasClass("del")){
if(confirm("是否取消關注")){
$(th).removeClass("del").addClass("add").text("+ 關注");
$.get("http://www.qubaobei.com/wx/view/mall/sub/baby_query.php?method=deleteRelate&qq_id="
+uid+"&relate="+to_uid);
}
}else {
$(th).removeClass("add").addClass("del").text("取消關注");
$.get("http://www.qubaobei.com/wx/view/mall/sub/baby_query.php?method=Relate&qq_id="
+uid+"&relate="+to_uid);
}
}
function cateChange(medal_id){
var stt = '';
$.get("http://www.qubaobei.com/ios/api/daren_user_list.php?mobile=51&user_id="+user_id+"&medal_id="+medal_id+"&page=1&limit=10",function(data){
var data = JSON.parse(data);
stt = editData(data['data']);
$("#content li").remove();
$("#content").append(stt);
});
medal = medal_id;
page = 2;
}
function getMore(){
var stt = '';
$.get("http://www.qubaobei.com/ios/api/daren_user_list.php?mobile=51&user_id="+user_id+"&medal_id="+medal+"&page="+page+"&limit=10",function(data){
$("#more").hide();
var data = JSON.parse(data);
if(data['ret']==1){
stt = editData(data['data']);
$("#content").append(stt);
page++;
}else{
alert("親，沒有啦~")
page=-1;
}
});
}
function editData(data){
var stt = '';
$.each(data,function(i,i_val){
var daren = '';
var avatar = i_val['avatar'];
var nickname = i_val['nickname'];
var to_uid = i_val['user_id'];
var post_num = i_val['post_num'];
var relate = i_val['relate'];
var fans_num = i_val['fans_num'];
$.each(i_val['daren'],function(y,y_val){
if(y==0){
daren = y_val['content'];
}else{
daren = daren+'.'+y_val['content'];
}
})
if(relate){
var guan = "<div onclick=\"guanzhu("+to_uid+",this)\" class=\"del\">取消關注</div>";
}else{
var guan = "<div onclick=\"guanzhu("+to_uid+",this)\" class=\"add\">+ 關注</div>";
}
stt = stt+"<li><div class=\"head\" onclick=\"turnUserCenter("+to_uid+")\"><img src=\""+avatar+"\" /></div><div class=\"mid\"><div class=\"name\" onclick=\"turnUserCenter("+to_uid+")\">"+nickname+"</div><div class=\"kind\">"+daren+"</div><div class=\"num\">發帖量 "+post_num+"</div></div><div class=\"after\">"+guan+"<div class=\"fan\">粉絲量 "+fans_num+"</div></div></li>"
});
return stt;
}
$(window).scroll(function() {
if(page < 0){
return false;
}
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
var cha = scrollHeight - scrollTop - windowHeight;
if (cha<10) {
$("#more").show();
getMore();
}
});
</script>
</body>
</html>
參考例子
