将tab-with-segmented-control.html的Style和Color部分删除了
如何才能让.mui-control-content的高度占满剩下的全部，有地方设置吗
<!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="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
/*.mui-bar-nav ~ .mui-content{padding-top:54px;}*/
.mui-card .mui-control-content {
padding: 10px;
}
.mui-segmented-control .mui-control-item {
padding: 10px 0;
}
.mui-control-content {
height: 150px; /*此处高度如何设，不能定死，还要考虑横竖屏*/
}
</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>
</header>
<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">
待办公文（8）
</a>
<a class="mui-control-item" href="#item2">
已办公文
</a>
<a class="mui-control-item" href="#item3">
全部公文
</a>
</div>
</div>
<div>
<div id="item1" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<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>
<li class="mui-table-view-cell">
第一个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
<div id="item2" class="mui-control-content">
<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>
</ul>
</div>
<div id="item3" class="mui-control-content">
<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>
</ul>
</div>
</div>
</div>
<script>
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if (styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-' + style) : '') + ' mui-segmented-' + color;
}
}
});
})(mui);
</script>
</body>
</html>
8 个回复
iOS (作者)
有高手能帮忙解决吗
其实.mui-control-content的高度 = body高度 - .mui-segmented-control的高度
如果用jquery的话直接写在onreday中便可，但是mui中，真是无从下手，忘高手指点一下啊.
DCloud_UNI_FXY
jukai
可以用仿安卓的选项卡，弄下吗？
2015-01-27 00:41
踩着单车载着猪
大概写了个~没怎么测试
iOS (作者)
不错，解决我的问题，非常感谢，看了半天，其实重点在 style="position: absolute;top: 60px;bottom: 0;left: 0;right: 0;"
2015-01-28 11:53
踩着单车载着猪
上面的有点奇怪，height:100%怎么能适配
DCloud_UNI_FXY
上边的代码是绝对定位方式实现，需要结合scroll控件来实现区域滚动。
control-content的父容器使用绝对定位，而control-content高度设置为100%。
control-content里的内容使用scroll控件来滚动。
可以用css实现的，尽量不要用js实现
踩着单车载着猪
给大大点个赞~
2015-01-26 16:16
DCloud_UNI_FXY
jukai
太感谢了，就是这个效果。
2015-01-27 16:43
iOS (作者)
这个效果挺好，不过mui在slider部分尚有bug,如果点击过快，或偶尔双击可能会导致mui-control-item部分丢失，不知道是不是个例。
2015-01-28 11:54
jukai
我也遇到了相同的问题，mui-control-item会丢失哦，可以帮忙看看问题吗？
2015-01-28 23:32
DCloud_UNI_FXY
截图说明一下
2015-01-29 00:00
jukai
回复 DCloud_UNI_FXY:截图了，帮忙看一下，用的代码就是上面你给出来的，按你提供的代码我也测试了下，也会出现这样的问题
2015-01-29 00:55
jukai
下拉时候，或点击，双击时候，特别是点击那条灰色的mui-slider-progress-bar是否，会导致上门的tab没了。
DCloud_UNI_FXY
下个版本修复此问题
jukai
你好，还想反馈一个bug问题，就是上面那种实现场景，在android下面scroll无法上下滚动的，也会导致无法下拉刷新，上拉加载。
2015-02-02 00:43
DCloud_UNI_FXY
代码贴出来
2015-02-02 18:06