前 言
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> ???????<div class="d1">我是div1,下面是插入的子页面</div> ?<!--我们将在这个div下边插入子页面--> ???????????</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> ???????<div class="mui-content"> ???????????<div id="slider" class="mui-slider mui-fullscreen"> ???????????????<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" data-wid="tab-top-subpage-1.html"> ???????????????????????????推荐 ???????????????????????</a> ???????????????????????<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html"> ???????????????????????????热点 ???????????????????????</a> ???????????????????</div> ???????????????</div> ???????????</div> ???????</div> ???????<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网站上查找帮助文档 http://dev.dcloud.net.cn/mui/，还有很多小功能，我会陆续更新的~~~
MUI顶部选项卡的用法(tab-top-webview-main)
原文地址：http://www.cnblogs.com/wuhao752718372/p/7636515.html