<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="__WCSS__/hits.css">
<link rel="stylesheet" href="__WCSS__/mui.min.css">
<script src="/static/wapp/js/jquery.min.js"></script>
<script src="/static/wapp/js/mui/mui.min.js"></script>
</head>
<body>
{include file='public/head_normal'/}
<input type="hidden" id="totalPage" value="{$totalPage}">
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表 第一次进入页面通过AJAX请求后台获得第一页数据-->
<ul id='OA_task_1' class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script>
var curPage=0; //当前页码初始化数0开始
var totalPage = $('#totalPage').val(); //后台算出总页数
mui.init({
pullRefresh: {
container: '#pullrefresh', //容器
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现 -》加载一页数据
*/
function pulldownRefresh() {
curPage = 1;//当前页码数
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var data = getPageData(curPage);
if(data!=null){
table.innerHTML=data;
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
mui('#pullrefresh').pullRefresh().refresh(true); //激活上拉加载
}, 1500);
}
/**
* 第一步 默认进-》上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
//判断当前页是否大于总页数
mui('#pullrefresh').pullRefresh().endPullupToRefresh((curPage > totalPage)); //参数为true代表没有更多数据了。
if(typeof(totalPage)=='undefined' || totalPage<=1 || curPage==totalPage){
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}else{
curPage = curPage+1;
if(curPage >totalPage){
mui('#pullrefresh').pullRefresh().enablePullupToRefresh(true);
}else{
var data = getPageData(curPage);
if(data!=null ){
var table = $(".mui-table-view");
table.append(data);
}
mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
if(curPage == totalPage ){//当前页加载数据之后判断是不是还有下一页 没有的话底部显示没有更多数据
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
}
}
}, 1500);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
/**
* 获取数据
*/
function getPageData(page){
var data=null;
mui.ajax("/wapp/vip/hits.html",{
data:{'page':page},
dataType:'json',
type:"post",
async:false,
success:function(d){
data=d;
}
});
return data;
}
/**
* 左滑删除功能
*/
$('#OA_task_1').on('tap', '.mui-btn', function(event) {
var elem = this;
var li = elem.parentNode.parentNode;
mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
li.parentNode.removeChild(li);
} else {
setTimeout(function() {
$.swipeoutClose(li);
}, 0);
}
});
});
var btnArray = ['确认', '取消'];
</script>
</body>
</html>//通过AJAX请求第一页数据 和更多数据
/**
* 谁看过我
*/
public function hits(Request $request){
if($request->isAjax()){
$map['v.uid'] = $this->uid;
$currentPage = $_POST['page'];
$limit=5;
$lst = Db::name('mycard_view v')
->join('mycard m','m.uid = v.vid')
->field('v.*,m.uname,m.company')
->where($map)
->limit(($currentPage - 1)*$limit, $limit)
->select();
$this->assign('lst',$lst);
$result= $this->fetch('ajaxhits');
exit(json_encode($result));
}else{
$limit = 5;
$map['uid'] = $this->uid;
$count = Db::name('mycard_view')->where($map)->count('id');
$totalPage = ceil($count/$limit);
$this->assign('totalPage',$totalPage);
$this->assign('page_title','谁看过我');
$this->assign('arrow','arrow');
$this->assign('backurl','/wapp/member/personal.html');
$this->assign('nav3','munow');
return view();
}
}