<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>活动列表</title>
<link rel="stylesheet" href="../css/mui.min.css">
<style>
.title {
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
</style>
</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 id="wrap">
<div class="mui-content">
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll" style="margin-top: 40px;">
<ul class="mui-table-view" id="consultantslist">
<li class="mui-table-view-cell" v-for="item in items">
<span class="id mui-hidden">{{item.id}}</span>
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
<div class="mui-media-body">
{{item.title}}
<p class='mui-ellipsis'>{{item.starttime|formatDate}}-{{item.endtime|formatDate}}</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script type="text/javascript">
var consultantslist = new Vue({
el: '#consultantslist',
data: {
items: [] //列表信息流数据
},
methods:{
add:function(list){
this.items = this.items.concat(list);
}
},
filters: {
formatDate:function (time) {
var index=time.indexOf(" ");
return time.substring(0,index);
}
}
});
var pageNumber=1;//当前页数
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
function pulldownRefresh(){
pageNumber = 1;
var data = {
pageNumber:pageNumber,
pageSize:2
}
$.ajax({
url:'',
data: data,
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(result) {
consultantslist.items=result.list;
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
mui('#pullrefresh').pullRefresh().refresh((result.list.length>=2));
pageNumber++;
},
error: function() {
}
});
}
function pullupRefresh(){
var data = {
pageNumber:pageNumber,
pageSize:2
}
$.ajax({
url:'',
data: data,
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(result) {
consultantslist.add(result.list);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((result.list.length < 2)); //参数为true代表没有更多数据了。
pageNumber++;
},
error: function() {
}
});
}
//详情
$("#consultantslist").on("click","li",function(){ //只需要找到你点击的是哪个ul里面的就行
var id = $(this).find('.id').text();
var data = {
id: id
}
mui.openWindow({
url:'activelistdetail.html?id='+id,
id:"activelistdetail"
});
});
</script>
</body>
</html>