主页代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/amazeui.min.css"/>
<link rel="stylesheet" type="text/css" href="../css/wap.css?2"/>
<link rel="stylesheet" type="text/css" href="../css/gloalV5.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">剑哥博客</h1>
</header>
<div class="mui-content" >
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item" >
<a href="#">
<img src="../blogimg/c1.png">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item" userName="18896101294" myid="2361">
<a href="javascript::">
<img src="../blogimg/987be984-5d8c-4bb6-a664-afdd314786ac.jpg">
</a>
<div class="pet_slider_font">
<span class="pet_slider_emoji"> []~(￣▽￣)~* </span>
<span>c#语音播放崎岖之路</span>
</div>
<div class="pet_slider_shadow"></div>
<div class="pet_slider_shadow"></div>
</div>
<!-- 第二张 -->
<div class="mui-slider-item" userName="aojiancc2" myid="2332">
<a href="#">
<img src="../blogimg/mbanner17.png">
</a>
<div class="pet_slider_font">
<span class="pet_slider_emoji"> (╭￣3￣)╭♡ </span>
<span>藕喜欢梨~(￣▽￣)~* </span>
</div>
<div class="pet_slider_shadow"></div>
</div>
<!-- 第三张 -->
<div class="mui-slider-item" userName="cz" myid="162">
<a href="#">
<img src="../blogimg/mbanner2.jpg">
</a>
<div class="pet_slider_font">
<span class="pet_slider_emoji"> (｡・`ω´･) </span>
<span>Python实例 2-12306抢票(一) 登陆</span>
</div>
<div class="pet_slider_shadow"></div>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item" userName="18896101294" myid="2361">
<a href="#">
<img src="../blogimg/987be984-5d8c-4bb6-a664-afdd314786ac.jpg">
</a><div class="pet_slider_font">
<span class="pet_slider_emoji"> []~(￣▽￣)~* </span>
<span>c#语音播放崎岖之路</span>
</div>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="mui-content" >
<div style="height: 20px;"></div>
<ul class="pet_circle_nav_list" style="font-weight: bold;">
<li><a href="javascript:;" id="1" class="iconfont "><img src="../blogimg/net..png" ></a><span>.NET</span></li>
<li><a href="javascript:;" id="13" class="iconfont "><img src="../blogimg/REDIS.png" ></a><span>Redis</span></li>
<li><a href="javascript:;" id="5" class="iconfont "><img src="../blogimg/java.png" ></a><span>Java</span></li>
<li><a href="javascript:;" id="8" class="iconfont "><img src="../blogimg/python.png" ></a><span>Python</span></li>
<li><a href="javascript:;" id="11" class="iconfont "><img src="../blogimg/Android.png" ></a><span>Android</span></li>
<li><a href="javascript:;" id="2" class="iconfont "><img src="../blogimg/CORE.png" ></a><span>.NET Core</span></li>
<li><a href="javascript:;" id="12" class="iconfont "><img src="../blogimg/data.png" ></a><span>数据库</span></li>
<li><a href="javascript:;" class="iconfont "><img src="../blogimg/more.png" ></a><span>更多</span></li>
</ul>
<div style="height: 20px;"></div>
<div id="pullrefresh">
<ul class="mui-table-view" id="blogapp">
<li class="mui-table-view-cell mui-media" v-for=" item in message" >
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" v-bind:src=item.head>
<div class="mui-media-body">
{{item.title}}
<p class="mui-ellipsis">{{item.sContent}}</p>
<p style="vertical-align: middle;float: right;"><img src="../blogimg/datepng.png"><span>{{item.createTime}}</span> <img src="../blogimg/newsbg04.png" > <span>浏览（{{item.vcount}})</span> <img src="../blogimg/newsbg01.png" > <span>技术（{{item.aClass}}）</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div data-am-widget="gotop" mypage="1" class="am-gotop am-gotop-fixed am-no-layout am-active">
<a href="#top" title="">
<img class="am-gotop-icon-custom" src="../blogimg/goTop.png">
</a>
</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script type="text/javascript">
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
style: 'circle',
offset: '0px',
auto: true,
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
//轮播播放
var gallery = mui('.mui-slider');
gallery.slider({
interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
});
/**
* 下拉刷新具体业务实现
*/
var count = 0;
function pulldownRefresh() {
setTimeout(function() {
count++;
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
//for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
mui.get('http://m.tnblog.net/api/v1/home/'+count,function(data){
var content="";
for (var key in data.value){
var strjson=data.value[key];
content+='<li class="mui-table-view-cell mui-media" >'+
'<a href="javascript:;">'+
'<img class="mui-media-object mui-pull-left" src='+strjson.head+'>'+
'<div class="mui-media-body">'+
strjson.title +
'<p class="mui-ellipsis">'+strjson.sContent+'</p>'+
'<p style="vertical-align: middle;float: right;"><img src="../blogimg/datepng.png"><span>'+strjson.createTime+'</span> '+
'<img src="../blogimg/newsbg04.png" > <span>浏览（'+strjson.vcount+')</span>'+
' <img src="../blogimg/newsbg01.png" > <span>技术（'+strjson.aClass+')</span></p>'+
'</div>'+
'</a>'+
'</li> ';
}
li.innerHTML=content;
});
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
//}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
count++;
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
//for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
mui.get('http://m.tnblog.net/api/v1/home/'+count,function(data){
var content="";
for (var key in data.value){
var strjson=data.value[key];
content+='<li class="mui-table-view-cell mui-media" >'+
'<a href="javascript:;">'+
'<img class="mui-media-object mui-pull-left" src='+strjson.head+'>'+
'<div class="mui-media-body">'+
strjson.title +
'<p class="mui-ellipsis">'+strjson.sContent+'</p>'+
'<p style="vertical-align: middle;float: right;"><img src="../blogimg/datepng.png"><span>'+strjson.createTime+'</span> '+
'<img src="../blogimg/newsbg04.png" > <span>浏览（'+strjson.vcount+')</span>'+
' <img src="../blogimg/newsbg01.png" > <span>技术（'+strjson.aClass+')</span></p>'+
'</div>'+
'</a>'+
'</li> ';
}
li.innerHTML=content;
});
//下拉刷新，新纪录插到最后面；
table.insertBefore(li, table.lastChild);
//}
mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //refresh completed
}, 1500);
}
contentrefresh(1);
function contentrefresh(page){
mui.get('http://m.tnblog.net/api/v1/home/'+page,function(data){
var vm=new Vue({
el: '#blogapp',
data: {
message: data.value
}
})
});
}
</script>
</body>
</html>
实现效果如下：
是不是很有特色呢？
2822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
