MUI顶部选项卡的用法
前 言
MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等
最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。
1主页代码
<!doctype html><html>
<head>
<meta charset=UTF-8>
<title></title>
<meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no />
<link href=css/mui.min.css rel=stylesheet />
<style type=text/css>
.d1{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<p class=d1>我是p1,下面是插入的子页面</p> <!--我们将在这个p下边插入子页面-->
</body>
<script src=js/mui.min.js></script>
<script type=text/javascript>
mui.init({
subpages:[{ //下边是初始化，然后这个页面显示我们将插入的页面
url:tab-top-webview-main.html,
id:tab-top-webview-main.html,
styles:{
top:50px,
bottom:0px
}
}]
}) </script></html>
2子页代码
<!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>
<link rel=stylesheet href=css/mui.min.css>
</head>
<body>
<p class=mui-content>
<p id=slider class=mui-slider mui-fullscreen>
<p id=sliderSegmentedControl class=mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted>
<p class=mui-scroll>
<a class=mui-control-item mui-active href=#item1mobile data-wid=tab-top-subpage-1.html>
推荐 </a>
<a class=mui-control-item href=#item2mobile data-wid=tab-top-subpage-2.html>
热点 </a>
</p>
</p>
</p>
</p>
<script src=js/mui.min.js></script>
<script src=js/webviewGroup.js type=text/javascript charset=utf-8></script>
<script>
mui.init();
mui.plusReady(function() {
var group = new webviewGroup(tab-top-webview-main.html, {
items: [{
id: tab-top-subpage-1.html, //这是子页1的路径
url: tab-top-subpage-1.html,
extras: {}
}, {
id: tab-top-subpage-2.html, //这是子页2的路径
url: tab-top-subpage-2.html,
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(.mui-control-item.mui-active);
if(c) {
c.classList.remove(mui-active);
}
document.querySelector(.mui-scroll .mui-control-item:nth-child( + (parseInt(obj.index) + 1) + )).classList.add(mui-active);
}
});
mui(.mui-scroll).on(tap, .mui-control-item, function(e) {
var wid = this.getAttribute(data-wid);
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close(auto);
} </script>
</body></html>
3代码解释
var group = new webviewGroup(tab-top-webview-main.html, {
items: [{
id: tab-top-subpage-1.html, //这是子页1的路径
url: tab-top-subpage-1.html,
extras: {}
}, {
id: tab-top-subpage-2.html, //这是子页2的路径
url: tab-top-subpage-2.html,
extras: {}
}]
})
1、子页选项卡的超链接a的data-wid=属性需要设置为对应子页选项卡路径。
<a class=mui-control-item mui-active href=#item1mobile data-wid=tab-top-subpage-1.html>
推荐</a>
2、这里，new webviewGroup(tab-top-webview-main.html,{}) 第一个参数需要传入一个页面的id。需要注意的是，这个页面id 就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面
new webviewGroup(tab-top-webview-main.html, {}
3、 items数组中传入的是子页对应选项卡该导入的子页面的id，有几个子页就添加几个子页，中间用逗号分隔
以上就是MUI顶部选项卡的用法的详细内容，更多请关注云资源网其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
云资源网
