MUI底部选项卡切换

最新推荐文章于 2024-05-10 16:30:38 发布

菜鸟好好吃

最新推荐文章于 2024-05-10 16:30:38 发布

阅读量854

点赞数

分类专栏：前端文章标签： MUI 底部选项卡切换

本文链接：https://blog.csdn.net/qq_35128300/article/details/88585827

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在网上找到的一种方法。测试发现原来方法有BUG(界面切换不过去)，修改了一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../js/mui.min.js"></script>
<script src="../js/login.js"></script>
<link href="../css/mui.min.css" rel="stylesheet"/>

</head>
<body>
   <nav class="mui-bar mui-bar-tab" id="nav">
       <a id="tab_world" class="mui-tab-item mui-active" >
           <span class="mui-icon mui-icon-home" ></span>
           <span class="mui-tab-label">树洞</span>
       </a>
       <a id="tab_help" class="mui-tab-item">
           <span class="mui-icon mui-icon-email"></span>
           <span class="mui-tab-label">任务</span>
       </a>
       <a id="tab_find" class="mui-tab-item">
           <span class="mui-icon mui-icon-contact"></span>
           <span class="mui-tab-label">寻找</span>
       </a>
       <a id="tab_setting" class="mui-tab-item" >
           <span class="mui-icon mui-icon-gear"></span>
           <span class="mui-tab-label">设置</span>
       </a>
   </nav>

   <script type="text/javascript" charset="utf-8">
   mui.init({
       subpages:[//首先加载首页
{
url:'world.html',
id:'tab_world',
styles:{
top:'0px',
bottom:'60px'
}
}
],
preloadPages:[//预加载其他页面
{
url:'help.html',
id:'tab_help',
styles:{
   top:'0px',
   bottom:'60px'
}
},
{
   url:'find.html',
   id:'tab_find',
   styles:{
   top:'0px',
   bottom:'60px'
   }
},
{
   url:'setting.html',
   id:'tab_setting',
   styles:{
       top:'0px',
       bottom:'60px'
   }
}
]
   });
   mui.plusReady(function(){
       var tab_world,tab_help,tab_find,tab_setting;
mui("#nav").on("tap","#tab_world",function(){//点击触发
tab_world=plus.webview.getWebviewById("tab_world");
tab_help=plus.webview.getWebviewById("tab_help");
tab_find=plus.webview.getWebviewById("tab_find");
tab_setting=plus.webview.getWebviewById("tab_setting");
tab_help.hide();
tab_find.hide();
tab_setting.hide();
tab_world.show();

})
mui("#nav").on("tap","#tab_help",function(){//点击触发
tab_world=plus.webview.getWebviewById("tab_world");
tab_help=plus.webview.getWebviewById("tab_help");
tab_find=plus.webview.getWebviewById("tab_find");
tab_setting=plus.webview.getWebviewById("tab_setting");
tab_help.show();
tab_world.hide();
tab_find.hide();
tab_setting.hide();

})
mui("#nav").on("tap","#tab_find",function(){//点击触发
tab_world=plus.webview.getWebviewById("tab_world");
tab_help=plus.webview.getWebviewById("tab_help");
tab_find=plus.webview.getWebviewById("tab_find");
tab_setting=plus.webview.getWebviewById("tab_setting");
tab_find.show();
tab_world.hide();
                   tab_help.hide();
tab_setting.hide();

})
mui("#nav").on("tap","#tab_setting",function(){//点击触发
   tab_world=plus.webview.getWebviewById("tab_world");
tab_help=plus.webview.getWebviewById("tab_help");
tab_find=plus.webview.getWebviewById("tab_find");
tab_setting=plus.webview.getWebviewById("tab_setting");
   tab_setting.show();
   tab_world.hide();
                   tab_help.hide();
tab_find.hide();
})
   })

</script>

</body>
</html>

菜鸟好好吃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MUI底部选项卡切换

在网上找到的一种方法。测试发现原来方法有BUG(界面切换不过去)，修改了一下。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,mini
复制链接

扫一扫

专栏目录