1.引入：
mui.css
mui.min.css
mui.js
2、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="/css/mui.min.css">
<link rel="stylesheet" href="css/icons-extra.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<style>
.mui-input-clear.mui-indexed-list-search-input {
margin-bottom: 5px;
}
ul li{
40px;
height: 40px;
margin-bottom: 10px;
display: block;
border: 1px solid red;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
margin-right: 0px;
padding: 10px 5px 0 10px;
}
.mui-table-view.mui-grid-view {
padding: 3px 1px 1px 3px;
}
.ulboder>li
{
border: 1px solid #E5E5E5;
margin: 0 0px -1px -1px;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
100%;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active
{
background-color: #fff;
}
/*上拉加载样式*/
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
</style>
</head>
<body id="bd">
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3" style="position:fixed;top:0px;bottom:0px;overflow-y:scroll;overflow-x:hidden">
<div id="tab-item" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<div class="mui-loading">
<div class="mui-spinner">
<ul>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mui-col-xs-3" style="position:fixed;top:0px;bottom:0px;overflow-y:scroll;overflow-x:hidden;transform: translateX(100px);">
<div id="tab-item" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<div class="mui-loading">
<div class="mui-spinner">
<ul>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mui-col-xs-3" style="position:fixed;top:0px;bottom:0px;overflow-y:scroll;overflow-x:hidden;transform: translateX(200px);">
<div id="tab-item" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<div class="mui-loading">
<div class="mui-spinner">
<ul>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li ><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.js"></script>
</body>
</html>