微客导航 » 文章资讯 » MUI顶部选项卡的用法(tab-top-webview-main)详解

MUI顶部选项卡的用法(tab-top-webview-main)详解

2023-09-23 16:09:05 174

前言

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" } }] })

2子页代码





HelloMUI











推荐


热点

3代码解释

vargroup=newwebviewGroup("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、这里，newwebviewGroup("tab-top-webview-main.html",{}) 第一个参数需要传入一个页面的id。需要注意的是，这个页面id就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面

newwebviewGroup("tab-top-webview-main.html",{}

3、items数组中传入的是子页对应选项卡该导入的子页面的id，有几个子页就添加几个子页，中间用逗号分隔

大家如果还有别的需求，可以去MUI网站上查找帮助文档 http://dev.dcloud.net.cn/mui/，还有很多小功能，我会陆续更新的~~~

总结

以上所述是小编个大家介绍的MUI顶部选项卡的用法(tab-top-webview-main)详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

MUI顶部选项卡的用法(tab-top-webview-main)详解

热门推荐

随机推荐