<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height:800px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</style>
<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>
<button id='setting' class=" mui-pull-right mui-btn-link">设置</button>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
正常
</a>
<a class="mui-control-item" href="#item2mobile">
风险
</a>
<a class="mui-control-item" href="#item3mobile">
已结束
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<a href="table.html">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</a>
</li>
<li class="mui-table-view-cell">
<a href="table.html">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</a>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-media-body">
<h4 id="procode" class='mui-ellipsis'>项目1</h4>
<h5 id="pro" class='mui-ellipsis' float='left'>项目经理1 - 项目经理1</h5>
<h5 id="pro" class='mui-ellipsis' float='left'></h5>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
preloadPages:[{
id:'project_detail',
url:'project_detail.html'
}
],
pullRefresh : {
container:"#item1mobile",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :null //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
function turnPage(){
mui.openWindow({
url: 'project_detail.html',
id: 'project_detail',
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
};
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: false //是否显示滚动条
});
$.plusReady(function() {
//设置
var settingButton = document.getElementById('setting');
//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
settingButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'setting.html',
id: 'setting',
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
});
//--
$.oldBack = mui.back;
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
// var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
// var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
var item1 = document.getElementById('item1mobile');
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
app.searchProject(item2, 1);
setTimeout(function() {
// item2.querySelector('.mui-scroll').innerHTML = html2;
mui.init({
pullRefresh : {
container:"#item2mobile",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :null //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
}, 500);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
app.searchProject(item3, 1);
setTimeout(function() {
// item3.querySelector('.mui-scroll').innerHTML = html3;
mui.init({
pullRefresh : {
container:"#item3mobile",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :null //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
}, 500);
}
}
});
// if (item1.querySelector('.mui-loading')) {
// app.searchProject(item1, 1);
// setTimeout(function() {
//// item2.querySelector('.mui-scroll').innerHTML = html2;
// mui.init({
// pullRefresh : {
// container:"#item1mobile",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
// up : {
// contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
// contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
// callback :null //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
// }
// }
// });
// }, 500);
// }
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
});
})(mui);
</script>
</body>
</html>麻烦大神帮我看看！我的HTML上传不了
3 个回复
2***@qq.com (作者)
附件如下
2***@qq.com (作者)
去掉加载更多滑动得顺畅一点，但是显示不完全。
2***@qq.com (作者)
去掉加载更多滑动得顺畅一点，但是显示不完全。
BoredApe
请上传一个能完整运行的测试工程
2016-06-21 09:28