在html中顶部选项卡代码,MUI顶部选项卡的⽤法（tab-top-
webview-main）详解
前  ⾔
MUI是⼀款最接近原⽣APP体验的⾼性能前端框架，它的⽐较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等
最近⽤MUI做⼿机app应⽤的时候，遇到的⼩bug。顺便研究了⼀下这个tab-top-webview-main，这⾥给⼤家分享⼀下。
1主页代码
.d1{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #CCCCCC;
}
我是div1，下⾯是插⼊的⼦页⾯
mui.init({
subpages:[{ //下边是初始化，然后这个页⾯显⽰我们将插⼊的页⾯
url:"tab-top-webview-main.html",
id:"tab-top-webview-main.html",
styles:{
top:"50px",
bottom:"0px"
}
}]
})
mui框架常用方法
2⼦页代码
Hello MUI
推荐
热点
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) {
ve("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 = Attribute("data-wid");
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close("auto");
}
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=""属性需要设置为对应⼦页选项卡路径。
推荐
2、这⾥，new webviewGroup("tab-top-webview-main.html",{})  第⼀个参数需要传⼊⼀个页⾯的id。需要注意的是，这个页⾯id 就是我们包含顶部选项卡的页⾯，也就是当前我们这段js所在的页⾯
new webviewGroup("tab-top-webview-main.html", {}
3、 items数组中传⼊的是⼦页对应选项卡该导⼊的⼦页⾯的id，有⼏个⼦页就添加⼏个⼦页，中间⽤逗号分隔
总结
以上所述是⼩编个⼤家介绍的MUI顶部选项卡的⽤法(tab-top-webview-main)详解，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。