iOS
iOS
  • 发布:2015-01-26 14:05
  • 更新:2015-01-29 17:43
  • 阅读:2862

tab-with-segmented-control页面的布局高度如何更改

分类:MUI
mui

将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>
2015-01-26 14:05 负责人:无 分享
已邀请:
iOS

iOS (作者)

有高手能帮忙解决吗

其实.mui-control-content的高度 = body高度 - .mui-segmented-control的高度

如果用jquery的话直接写在onreday中便可,但是mui中,真是无从下手,忘高手指点一下啊.

DCloud_UNI_FXY

DCloud_UNI_FXY

<!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;  
			}  
		</style>  
		<script>  
			mui.init();  
		</script>  
	</head>  
  
	<body>  
		<style>  
			.mui-control-content {  
				min-height: 150px;  
				height:100%;  
			}  
		</style>  
		<div class="mui-content mui-fullscreen">  
			<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 style="position: absolute;top: 60px;bottom: 0;left: 0;right: 0;">  
				<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 //是否显示滚动条  
				});  
			})(mui);  
		</script>  
  
	</body>  
  
</html>
  • jukai

    可以用仿安卓的选项卡,弄下吗?


    2015-01-27 00:41

踩着单车载着猪

踩着单车载着猪

大概写了个~没怎么测试

(function($) {  
            	var winHeight = window.screen.height,  
            		ctlHeight = document.body.querySelector('.mui-segmented-control').offsetHeight,  
            		ctlConts = document.body.querySelectorAll('.mui-control-content');  
            		  
            	mui.each(ctlConts, function() {  
            		this.style.height = (winHeight-ctlHeight-20) +'px';  
            	});  
})(mui);
  • iOS (作者)

    不错,解决我的问题,非常感谢,看了半天,其实重点在 style="position: absolute;top: 60px;bottom: 0;left: 0;right: 0;"


    2015-01-28 11:53

踩着单车载着猪

踩着单车载着猪

上面的有点奇怪,height:100%怎么能适配

DCloud_UNI_FXY

DCloud_UNI_FXY

上边的代码是绝对定位方式实现,需要结合scroll控件来实现区域滚动。
control-content的父容器使用绝对定位,而control-content高度设置为100%。
control-content里的内容使用scroll控件来滚动。

可以用css实现的,尽量不要用js实现

DCloud_UNI_FXY

DCloud_UNI_FXY

  
<!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;  
			}  
			.mui-control-content {  
				background-color: white;  
				min-height: 215px;  
			}  
			.mui-control-content .mui-loading {  
				margin-top: 50px;  
			}  
		</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 class="mui-content">  
			<div id="slider" class="mui-slider mui-fullscreen">  
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
					<a class="mui-control-item mui-active" 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">  
										第一个选项卡子项-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="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>  
			mui.init({  
				swipeBack: false  
			});  
			(function($) {  
				$('.mui-scroll-wrapper').scroll({  
					indicators: true //是否显示滚动条  
				});  
				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 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')) {  
							setTimeout(function() {  
								item2.querySelector('.mui-scroll').innerHTML = html2;  
							}, 1000);  
						}  
					} else if (e.detail.slideNumber === 2) {  
						if (item3.querySelector('.mui-loading')) {  
							setTimeout(function() {  
								item3.querySelector('.mui-scroll').innerHTML = html3;  
							}, 1000);  
						}  
					}  
				});  
				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>
  • 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

jukai

下拉时候,或点击,双击时候,特别是点击那条灰色的mui-slider-progress-bar是否,会导致上门的tab没了。

DCloud_UNI_FXY

DCloud_UNI_FXY

下个版本修复此问题

  • jukai

    你好,还想反馈一个bug问题,就是上面那种实现场景,在android下面scroll无法上下滚动的,也会导致无法下拉刷新,上拉加载。


    2015-02-02 00:43

  • DCloud_UNI_FXY

    代码贴出来


    2015-02-02 18:06

该问题目前已经被锁定, 无法添加新回复