代码如下：
<!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" />-->
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</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 id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
<a class="mui-control-item" href="#item4mobile">
全部公文2
</a>
<a class="mui-control-item" href="#item5mobile">
全部公文3
</a>
<a class="mui-control-item" href="#item6mobile">
全部公文4
</a>
<a class="mui-control-item" href="#item7mobile">
全部公文5
</a>
<a class="mui-control-item" href="#item8mobile">
全部公文6
</a>
</div>
</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 id="item4mobile" 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 id="item5mobile" 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 id="item6mobile" 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 id="item7mobile" 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 id="item8mobile" 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 src="../js/mui.min.js"></script>
<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 html4 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第四个选项卡子项-1</li><li class="mui-table-view-cell">第四个选项卡子项-</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 html5 = '<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 html6 = '<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 html7 = '<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 html8 = '<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');
var item4 = document.getElementById('item4mobile');
var item5 = document.getElementById('item5mobile');
var item6 = document.getElementById('item6mobile');
var item7 = document.getElementById('item7mobile');
var item8 = document.getElementById('item8mobile');
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);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3;
}, 500);
}
}else if (e.detail.slideNumber === 3) {
if (item4.querySelector('.mui-loading')) {
setTimeout(function() {
item4.querySelector('.mui-scroll').innerHTML = html4;
}, 500);
}
}else if (e.detail.slideNumber === 4) {
if (item5.querySelector('.mui-loading')) {
setTimeout(function() {
item5.querySelector('.mui-scroll').innerHTML = html5;
}, 500);
}
}
else if (e.detail.slideNumber === 5) {
if (item6.querySelector('.mui-loading')) {
setTimeout(function() {
item6.querySelector('.mui-scroll').innerHTML = html6;
}, 500);
}
}
else if (e.detail.slideNumber === 6) {
if (item7.querySelector('.mui-loading')) {
setTimeout(function() {
item7.querySelector('.mui-scroll').innerHTML = html7;
}, 500);
}
}
else if (e.detail.slideNumber === 7) {
if (item8.querySelector('.mui-loading')) {
setTimeout(function() {
item8.querySelector('.mui-scroll').innerHTML = html8;
}, 500);
}
}
});
})(mui);
</script>
</body>
</html>理想效果：点击顶部选项卡全部公文2 全部公文3 全部公文4的时候 应该向左滑动并且居中
实际效果：没有居中，定位在居中偏右，
这个应该怎么改呢，左滑不居中的话感觉很难看。
1 个回复
花鸟相闻丶 (作者)
求教。