夏至未至
- 发布：2016-07-27 17:16
- 更新：2016-07-28 15:16
- 阅读：1401
同一个html中包含两个可滑动顶部选项卡，为什么第二个下面的蓝色横线不能滑动？大神求解！！！！
分类：MUI
最佳回复
Trust - 少说废话
<!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">
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
<link href="css/mui.dtpicker.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
<style>
.mui-card .mui-control-content {
padding: 10px;
}
.mui-control-content {
height: 100%;
}
.img-pad {
padding: 11px 0px;
}
.img-pads {
padding: 11px 0px;
}
.mui-pull-right {
margin-right: 10px;
}
.plan {
float: left;
margin: 8px 0px;
height: 3px;
width: 15%;
border: none;
background-color: gray;
}
#slider02 {
/*display: none;*/
}
</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" style="background-color: white;">
<div style="padding: 10px 10px;" id="segmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a style="border-bottom:0px;" class="mui-control-item mui-active" data-index="1" href="#item1">酒店预订</a>
<a style="border-bottom:0px;" class="mui-control-item" data-index="2" href="#item2">礼品换购</a>
</div>
<div id="item1" class="mui-control-content mui-active">
<div id="slider01" 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">新增加1</a>
<a class="mui-control-item" href="#item2mobile">申请中1</a>
<a class="mui-control-item" href="#item3mobile">已完成1</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">
<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell img-pad">
<div class="mui-slider-item">
<a href="#">
<img src="images/muwu.jpg">
<p class="mui-slider-title">静静看这世界<span class="mui-pull-right">Hbuilder</span></p>
</a>
</div>
</li>
</ul>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell img-pad">
<div class="mui-slider-item">
<a href="#">
<img src="images/shuijiao.jpg">
<p class="mui-slider-title">静静看这世界<span class="mui-pull-right">Hbuilder</span></p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="item2" class="mui-control-content">
<div id="slider02" class="mui-slider">
<div id="sliderSegmentedContro2" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a id="head2_1" class="mui-control-item mui-active" href="#item4mobile">
新增加2
</a>
<a id="head2_2" class="mui-control-item" href="#item5mobile">
申请中2
</a>
<a id="head2_3" class="mui-control-item" href="#item6mobile">
已完成2
</a>
</div>
<div id="sliderProgress" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div id="twos" class="mui-slider-group">
<div id="item4mobile" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
</div>
<div id="item5mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view" style="border: 0px #4e667d solid;">
<li class="mui-table-view-cell img-pads">
<div class="mui-slider-item">
<a href="#">
<img src="images/muwu.jpg">
<p class="mui-slider-title">静静看这世界<span class="mui-pull-right">Hbuilder</span></p>
</a>
</div>
</li>
</ul>
</div>
<div id="item6mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell img-pads">
<div class="mui-slider-item">
<a href="#">
<img src="images/shuijiao.jpg">
<p class="mui-slider-title">静静看这世界<span class="mui-pull-right">Hbuilder</span></p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.ready(function() {
var flag = false;
mui('#segmentedControl').on('tap', '.mui-control-item', function() {
var index = this.getAttribute('data-index');
if(index == '2') {
if(!flag) {
mui.later(function() {
mui('#slider02').slider().refresh();
}, 100);
flag = true;
}
}
});
});
</script>
</body>
</html>因为第二个slider组件默认是不展示的，所以在初始化的时候无法计算其宽度。
手动控制一下外部容器的展示和隐藏，以及slider控件的重置。
夏至未至 (作者)
谢谢
2016-07-28 15:22