<!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-row.mui-fullscreen>[class*="mui-col-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-control-content {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
width: 100%;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
background-color: #fff;
}
</style>
</head>
<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!--菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-right">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<p style="margin: 20px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭</button>
<button id="save_select" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">确定</button>
</p>
<div style="clear: both; width: 100%; height: 1px;"></div>
<div class="title">选中项：</div>
<div class="content">侧滑列表示例
</div>
</div>
</div>
</aside>
<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">侧面选项卡-div模式1</h1>
</header>
<div id="offCanvasContentScroll" class="mui-content">
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
</div>
</div>
<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
<div id="item1" class="mui-control-content mui-active">
</div>
<div id="item2" class="mui-control-content">
</div>
<div id="item3" class="mui-control-content">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
var controls = document.getElementById("segmentedControls");
var contents = document.getElementById("segmentedControlContents");
var html = [];
var i = 1,
j = 1,
m = 16, //左侧选项卡数量+1
n = 21; //每个选项卡列表数量+1
for (; i < m; i++) {
html.push('<a class="mui-control-item" href="#content' + i + '">1选项' + i + '</a>');
}
controls.innerHTML = html.join('');
html = [];
for (i = 1; i < m; i++) {
html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
for (j = 1; j < n; j++) {
html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
}
html.push('</ul></div>');
}
contents.innerHTML = html.join('');
//默认选中第一个
controls.querySelector('.mui-control-item').classList.add('mui-active');
contents.querySelector('.mui-control-content').classList.add('mui-active');
</script>
</body> </html>
1 个回复
2***@qq.com (作者)
上述代码为，hello模板示例中左侧选项卡-div模式，只在该示例html中加入了hello示例中的侧滑导航（div模式左滑菜单）html,将左侧选项卡放入了侧滑导航主菜单div中,侧滑没影响只是左侧选项卡不能区域滚动了，暂时不清楚是js影响的还是css影响的，同一个mui的js和css，两示例放一起后，左侧选项卡不能区域滚动，不知是结构放在位置不对，还是其它什么？需求解决方案，谢谢。