<!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">顶部选项卡-可左右拖动(div)</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 mui-active" href="#item1mobile">
推荐
</a>
</div>
</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">
<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>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
});
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
var bbs_type = document.querySelector('#sliderSegmentedControl .mui-scroll');
var itemMobile = document.querySelector('.mui-slider-group');
for(var i = 0; i < 6; i++) {
var type_a = document.createElement('a');
type_a.setAttribute('class', 'mui-control-item');
type_a.setAttribute('href', '#item' + (i + 2) + 'mobile">');
type_a.innerHTML = '测试' + (i + 2);
bbs_type.appendChild(type_a);
//创建列表容器
var itme = document.createElement('div');
itme.setAttribute('id', 'item' + (i + 2) + 'mobile');
itme.setAttribute('data-fid', i);
itme.setAttribute('class', 'mui-slider-item mui-control-content');
itemMobile.appendChild(itme);
//
var scrolldiv = document.createElement('div');
scrolldiv.setAttribute('id', 'scroll' + (i + 2) + '');
scrolldiv.setAttribute('class', 'mui-scroll-wrapper');
itme.appendChild(scrolldiv);
var muiscroll = document.createElement('div');
muiscroll.setAttribute('class', 'mui-scroll');
muiscroll.innerHTML = '<div class="mui-loading"><div class="mui-spinner"></div></div>';
scrolldiv.appendChild(muiscroll);
}
document.getElementById('slider').addEventListener('slide', function(e) {
if(e.detail.slideNumber === e.detail.slideNumber) {
var html=[];
if(document.getElementById('item' + (e.detail.slideNumber + 1) + 'mobile').querySelector('.mui-loading')) {
setTimeout(function() {
html.push('<ul class="mui-table-view">');
for (var i = 0; i < 10; i++) {
html.push('<li class="mui-table-view-cell">第'+(e.detail.slideNumber + 1)+'个选项卡子项-'+i+'</li>')
}
html.push('</ul>')
document.querySelector('#item' + (e.detail.slideNumber + 1) + 'mobile .mui-scroll').innerHTML = html.join('');
}, 500);
}
}
});
})(mui);
</script>
</body> </html>
复制代码可直接运行 在线等急急
