RT.
大概的页面是一个 div区域 + tab可滑动的两个列表. 然后有在manifast.json启用了沉浸式状态栏. 然后在css加了20px左右的margin.
碰到几个页面上的问题想求大佬们指教一下弟弟.
参考了 最新的hello mui的部分代码(https://www.dcloud.net.cn/hellomui/)
顶部选项卡-可左右拖动div, 多行列表, vue展示列表部分
1) 查询条件区域 #myqueryarea 通过标题栏右侧按钮控制隐藏/显示, 显示后下方展示列表超出屏幕范围, 然后整个页面div可以滑动上去, 列表也可以滑动. 这里要怎么调整好一些, 想把列表高度减小到适应屏幕高度就行了类似wrap_content的感觉.
2) 下拉刷新时显示的文字的位置有点太下面了, 这个要怎么调整呢?
3) 上拉加载的感觉不是很好, 就比如加载完毕后, 往下很快的滑动, 到最后一条时就已经触发加载了. 感觉有点过于灵敏, 缺少一个上拉之后才加载的过程.
代码贴在下面:
<!DOCTYPE html>
<html>
<!-- demo 参考顶部选项卡文字 + 三行列表 实现 -->
<head>
<title>Hello MUI</title>
<meta charset="utf-8">
<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="../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
<style>
/* listview */
.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
margin-top: 0;
}
.mui-table h4{
line-height: 21px;
font-weight: 500;
}
.mui-table .oa-icon{
position: absolute;
right:0;
bottom: 0;
}
.mui-table .oa-icon-star-filled{
color:#f14e41;
}
/* tab */
.mui-slider {
height: 100%;
}
.mui-control-content {
background-color: white;
min-height: 215px;
}
.mui-control-content .mui-loading {
margin-top: 60px;
}
/* item btn */
.mybtn {
font-size: 12px;
height: 30px;
width: 48px;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 4px;
padding: 0px;
}
/* queryarea */
#myqueryarea table{
background-color: #FFFFFF;
width: 100%;
}
#myqueryarea table tr{
height: 32px;
width: 100%;
margin: 0px;
padding: 2px;
text-align: center;
border: 0px;
border-radius: 0px;
}
#myqueryarea span{
font-size: 14px;
}
#myqueryarea input{
font-size: 15px;
width: 66%;
margin: 0px;
padding-left: 2px;
padding-right: 2px;
border: 1px solid #c3c3c3;
border-radius: 3px;
}
#myqueryarea button{
font-size: 12px;
height: 26px;
width: 48px;
margin: 4px;
padding: 0px;
border-radius: 2px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<i id="idbtnconf" class="mui-action-back mui-icon iconfont iconzuo cor-fff mui-pull-left"></i>
<h1 class="mui-title">查询</h1>
<i id="idbtnarea" class="mui-icon iconfont iconchaxun cor-fff mui-pull-right" onclick="showarea()"></i>
</header>
<div class="mui-content mui-fullscreen" id="dbcx">
<div id="myqueryarea" v-show="queryareastate">
<table>
<tr>
<td>
<span>编号：</span>
<input class="mui-input-clear mui-input">
</td>
<td rowspan="2">
<button id="idbtnquery" class="mui-btn-primary" type="button">查询</button>
</td>
</tr>
<tr>
<td>
<span>分类：</span>
<input class="mui-input-clear mui-input"/>
</td>
</tr>
</table>
</div>
<!-- 滑动选项卡 -->
<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 mui-active" href="#item1mobile">TAB1</a>
<a class="mui-control-item" href="#item2mobile">TAB2</a>
</div>
<!-- tab下方蓝色显示部分 -->
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></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 mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell" v-for="gritem in grdblist">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-9">
<h5>单号:
<span class="clztextgzdbh">{{gritem.bh}}</span>
</h5>
<h5>人员:
<span class="clztextclry">{{gritem.lastCommitor}}</span>
</h5>
<h5>类别:
<span class="clztextywlb">{{gritem.ywfl}}</span>
</h5>
</div>
<div class="mui-table-cell mui-col-xs-3" style="vertical-align: middle;">
<button type="button" class="mui-btn mui-pull-right mybtn" style="border-radius: 2px;" @tap="seedetail">查看</button>
</div>
</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">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell" v-for="gwitem in gwdblist">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-9">
<h5>单号:
<span class="clztextgzdbh">{{gwitem.bh}}</span>
</h5>
<h5>类别:
<span class="clztextywlb">{{gwitem.ywfl}}</span>
</h5>
</div>
<div class="mui-table-cell mui-col-xs-3" style="vertical-align: middle;">
<button type="button" class="mui-btn mui-btn-primary mui-pull-right mybtn" style="border-radius: 2px;" @tap="seedetail">查看</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init({
swipeBack:false ,//启用右滑关闭功能
});
var dbcx = new Vue({
el: '#dbcx',
data: {
grdblist: [],
gwdblist: [],
queryareastate : true,
},
methods: {
seedetail : function(){
console.log('vue 查看');
},
handle : function(){
console.log('vue 办理');
},
receive : function(){
console.log('vue 接收');
},
}
});
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: false ,//是否显示滚动条
});
// ------------ 上下拉刷新 多次调用 ------------------------
mui("#scroll1").pullRefresh({
down: {
height: 50,
auto: true, // 初始化时自动加载一次
callback: grPulldownRefresh
},
up: {
height: 50,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
contentrefresh: '正在加载...',
callback: grPullupRefresh
},
});
mui("#scroll2").pullRefresh({
down: {
height: 50,
auto: true,
callback: gwPulldownRefresh
},
up: {
height:50,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
contentrefresh: '正在加载...',
callback: gwPullupRefresh
},
});
// ------------------------------------
// 根据id获取到 item1和item2 的列表对象
var item1 = document.getElementById('item1mobile');
var item2 = document.getElementById('item2mobile');
// tab选项卡滑动触发事件
document.getElementById('slider').addEventListener('slide', function(e) {
if(e.detail.slideNumber === 0) {
} else if (e.detail.slideNumber === 1) {
}
});
// demo参考代码, 不清楚作用
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 ' + this.value;
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style')); // //force repaint
}
});
})(mui);
// 下拉刷新获取最新列表
function grPulldownRefresh() {
if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
plus.nativeUI.toast('似乎已断开与互联网的连接', {
verticalAlign: 'top'
});
return;
}
var loadparams = {"listcount": 0}; //默认给0条重新加载数据
//请求最新列表信息流
app.postData(app.getServerAddr() + 'common/appdbcx/queryGrdbList',
loadparams, function(data) {
app.isLoginOutTime(data); //判断是否登录超时
mui('#scroll1').pullRefresh().endPulldownToRefresh();
dbcx.grdblist = data['data'];
mui('#scroll1').pullRefresh().refresh(true);
}
);
}
// 上拉加载拉取历史列表
function grPullupRefresh() {
var loadparams = {"listcount": dbcx.grdblist.length}; //获取当前总条数继续加载10条(com定义)
app.postData(app.getServerAddr() + 'common/appdbcx/queryGrdbList',
loadparams, function(data) {
app.isLoginOutTime(data); //判断是否登录超时
mui('#scroll1').pullRefresh().endPullupToRefresh(data['data'].length == 0); // 为true时加载完毕
if(data['data'].length != 0){
dbcx.grdblist = dbcx.grdblist.concat(data['data']);
}
}
);
}
// 下拉刷新获取最新列表
function gwPulldownRefresh() {
if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
plus.nativeUI.toast('似乎已断开与互联网的连接', {
verticalAlign: 'top'
});
return;
}
var loadparams = {"listcount": 0};
app.postData(app.getServerAddr() + 'common/appdbcx/queryGwdbList',
loadparams, function(data) {
app.isLoginOutTime(data);
mui('#scroll2').pullRefresh().endPulldownToRefresh();
dbcx.gwdblist = data['data'];
mui('#scroll2').pullRefresh().refresh(true);
}
);
}
// 上拉加载拉取历史列表
function gwPullupRefresh() {
var loadparams = {"listcount": dbcx.gwdblist.length};
app.postData(app.getServerAddr() + 'common/appdbcx/queryGwdbList',
loadparams, function(data) {
app.isLoginOutTime(data); //判断是否登录超时
mui('#scroll2').pullRefresh().endPullupToRefresh(data['data'].length == 0);
if(data['data'].length != 0){
dbcx.gwdblist = dbcx.gwdblist.concat(data['data']);
}
}
);
}
function showarea(){
dbcx.queryareastate = ! dbcx.queryareastate;
}
</script>
</html>
0 个回复