点击后 要展开所有的item 怎么自适应高度
大虾01
- 发布：2016-01-07 11:48
- 更新：2017-05-11 09:29
- 阅读：15407
<!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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-card .mui-control-content {
padding: 10px;
}
</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">顶部选项卡-div模式</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">
<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 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>
<h5 class="mui-content-padded">Style</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>按钮</label>
<input name="style" type="radio" checked value="">
</div>
<div class="mui-input-row mui-radio">
<label>文字</label>
<input name="style" type="radio" value="inverted">
</div>
</form>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" value="negative">
</div>
</form>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
(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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/Common.js"></script>
<link href="css/mui.css" rel="stylesheet" />
<style>
html,#slider,.mui-content{
width: 100%;
height: 100%;
}
body{
margin-top: 45px;
width: 100%;
height: calc(100% - 45px);
}
.mui-slider-group{
height: calc(100% - 45px);
}
.mui-control-content {
background-color: white;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="mui-inner-wrap">
<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">IQC检验</h1>
<a class="mui-icon mui-icon-home mui-pull-right"></a>
</header>
</div>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
<a class="mui-control-item mui-active" href="#item1mobile">待检验</a>
<a class="mui-control-item" href="#item2mobile">已检验</a>
</div>
<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">
<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>
</div>
</div>
</body>
<script>
var ReceivingNo
mui.plusReady(function() {
var self = plus.webview.currentWebview();
ReceivingNo = self.ReceivingNo;
})
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 item2 = document.getElementById('item2mobile');
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;
}, 500);
}
}
});
})(mui);
</script>
</html>
document.getElementById('slider').addEventListener('slide', function(e) {
//自适应方法就是获得当前的slide数据如：e.detail.slideNumber ，表示当前，再修改id=item里的高度即可
var aaa = document.getElementById("item"+e.detail.slideNumber).offsetHeight;
document.getElementById("slider").style.height=aaa+"px";
});
-
document.getElementById('slider').addEventListener('slide', function(e) {
var aaa = document.getElementById("item"+e.detail.slideNumber).offsetHeight;
document.getElementById("slider").style.height=aaa+"px";
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.querySelector('.mui-scroll').innerHTML = html2;
}, 500);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3;
}, 500);
}
}
});
不对啊。。。但是它.mui-control-content { min-height: 215px;}这个最小高度好头疼2017-04-18 16:33
墙上有个洞
+1
2017-10-09 15:26