mui 底部导航菜单功能（原创）

简单版

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>底部导航菜单切换</title><link href="../../../css/mui.min.css" rel="stylesheet" /></head><body><nav class="mui-bar mui-bar-tab " id="nav"><a class="mui-tab-item mui-active" id="a1"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a><a class="mui-tab-item " id="a2"><span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span><span class="mui-tab-label">消息</span></a><a class="mui-tab-item " id="a3"><span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span><span class="mui-tab-label">消息</span></a></nav><script src="../../../js/mui.min.js"></script><script type="text/javascript" charset="utf-8">mui.init({subpages:[//先加载首页{url:'1.html',id:'a1',styles:{top:'0px',bottom:'60px'}}],preloadPages:[//缓存其他页面{url:'2.html',id:'a2',styles:{top:'0px',bottom:'60px'}},{url:'3.html',id:'a3',styles:{top:'0px',bottom:'60px'}}]});mui.plusReady(function(){ // 获取所有Webview窗口var winAll=plus.webview.all();//获取所有窗体//console.log(JSON.stringify(winAll)) var a1,a2,a3mui("#nav").on("tap","#a1",function(){//点击触发 a1=plus.webview.getWebviewById("a1");console.log(JSON.stringify(a1)) a1.show()a2.hide()//这一步必须有a3.hide()//这一步必须有})mui("#nav").on("tap","#a2",function(){//点击触发a2=plus.webview.getWebviewById("a2");a2.show()})mui("#nav").on("tap","#a3",function(){//点击触发a3=plus.webview.getWebviewById("a3");a3.show()})});</script></body>
</html>

专业版

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>底部导航菜单切换(专业写法)</title><link href="../../../css/mui.min.css" rel="stylesheet" /></head><body><nav class="mui-bar mui-bar-tab " id="nav"></nav><script src="../../../js/jquery.js"></script><script src="../../../js/mui.min.js"></script><script type="text/javascript" charset="utf-8">var hrefArr=[{"title":"首页","id":"a1","href":"1.html","icon":"mui-icon-home"},{"title":"消息也","id":"a2","href":"2.html","icon":"mui-icon-email"},{"title":"个人中心","id":"a3","href":"3.html","icon":"mui-icon-contact"}]//要跳转的  页面跟他的ID要先写好var navFirst=[],navOther=[],viewObj=[]//第一个页面数据  其他页面数据 窗体对象mui.plusReady(function(){ navInit()clickFun(navFirst[0].id,plus.webview.getWebviewById(navFirst[0].id))mui("#nav").on("tap","a",function(e){var id=$(this).attr("id")var obj=plus.webview.getWebviewById(id)clickFun(id,obj)})});function clickFun(id,obj){if(id==navFirst[0].id){$.each(navOther,function(i,v){var otherObj=plus.webview.getWebviewById(v.id)otherObj.hide()})}obj.show()}//初始化htmlfunction navInit(){var html=""$.each(hrefArr,function(i,v){if(i==0){}html+='<a class="mui-tab-item'+((i==0)?" mui-active":"")+' " id="'+v.id+'">'+'<span class="mui-icon '+v.icon+'"></span>'+'<span class="mui-tab-label">'+v.title+'</span>'+'</a>'})$("#nav").html(html)$.each(hrefArr,function(i,v){ var arrI={"url":v.href,"id":v.id,styles:{top:'0px',bottom:'60px' }}if(i==0){//第一个页面navFirst.push(arrI)}else{//缓存住的页面navOther.push(arrI)}})mui.init({subpages:navFirst,//先加载首页preloadPages:navOther//缓存其他页面});}//点击事件初始化</script></body>
</html>

mui 底部导航菜单功能（原创）相关推荐

android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
html仿微信公众号底部菜单代码,模仿微信公众号底部导航菜单
模仿微信公众号底部导航菜单 demo *{ margin:0; padding:0; box-sizing: border-box; } body{ background: #fff; font-si ...
mui底部选项卡切换功能
mui底部选项卡实现切换功能  <!DOCTYPE html> <html> <head> <met ...
vue商城项目开发：底部导航菜单（路由）
组件中引入css样式文件路由:底部导航
android自定义底部中间突出导航栏,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样就想着这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种是选中哪个,哪个就突出第一种方法简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...
android底部导航栏选中动画,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样就想着这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种是选中哪个,哪个就突出第一种方法简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...
BottomNavigationView+Navigation 添加底部导航菜单切换时的fragment过渡动画animation
Navigation默认的透明度动画,只有300毫秒,通过BottomNavigationView切换fragment时,几乎看不到过渡动画的效果,开始还以为没有动画. 开始在网上查找相关资料,最后找 ...
android 底部导航菜单_司机共创会前方拥堵！导航路线功能该怎么优化？
2020年8月12日 | [司机共创会]第23期,"导航路线"大壮经常收到司机朋友的问题,关于如何避开拥堵路线,用最快的速度将乘客送达目的地.其实这个烦恼,平台早就帮咱们考虑过了, ...

mui 底部导航菜单功能（原创）

mui 底部导航菜单功能（原创）相关推荐

最新文章

热门文章