前 言
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顶部选项卡的用法的详细内容，更多请关注云资源网其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » MUI顶部选项卡的用法
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » MUI顶部选项卡的用法
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
