MUI 底部导航 （选中高亮改变icon）

移动开发 2018-08-07 12:16:11 阅读次数: 0

底部导航栏应该是现在主流APP最常用的一种显示方式，我个人也觉得底部导航栏最清晰直观，一般以4-5个为宜。这里我做了点小东西，就是点击某个选项卡的时候，它自动高亮，并且改变icon，这样整体感觉就非常动感，比如信息选项卡，未点击的时候是一个封闭的信封，一点就变成打开的信封，要的就是这个效果。这里主要用到如下几种东西：【底部选项卡】，【外部icon引用】，【icon自动变换】，见代码和注释，上面的都是废话，一般的东西我都直接写在注释里，这样更加直观。

//html部分，底部五个选项卡，public-icon-style这种css都是本人自己的css，设置一些icon的样式，
//因为在MUI开发里，不管是自带icon还是外部引用的icon都是以字体样式来处理，比如颜色，color,
//大小，font-size,如果引用自带的icon非常简单，直接两个CSS:mui-icon和具体icon名称，但是有些时
//候一些特殊的业务需求，比如找不到你需要的icon，比如你想像我一样实现两个状态的icon动态切换，那
//就只能引用外部icon了，很简单，方法如下，百度搜：阿里矢量图，或者直接输入iconfont.cn/home，
//注册，搜索需要的icon然后，下载源代码，这时解压，我们需要两个文件，一个是iconfont.ttf文件，也
//就是icon的字体标准文件，放在我们font文件夹下面，还有一个iconfont.css文件，也就是我们下载的
//icon样式文件，放在css文件夹下面，里面有一段代码url('../fonts/iconfont.ttf?t=1533048640652')
// format('truetype'),地址改成刚才font文件夹下，其实你做一个项目，直接在阿里矢量网站建一个
//项目，每次找icon都直接加入购物车，然后下载源代码，这样每次去下载好的文件，解压覆盖即可
<nav class="mui-bar mui-bar-tab public-white-bg">
	    <a id="defaultTab" class="mui-tab-item mui-active" href="html/home.html">
	        <span class="mui-icon iconfont icon-shouye2 public-icon-style" id="home"></span>
	        <span class="mui-tab-label public-icon-style" id="hometa">首页</span>
	    </a>
	    <a class="mui-tab-item" href="html/message.html">
	        <span class="mui-icon iconfont icon-icon-xinfeng" id="message"><span style="display: none;" class="mui-badge" >1</span></span>
	        <span class="mui-tab-label" id="messageta">信息</span>
	    </a>
	    <a class="mui-tab-item" href="html/bigdata.html">
	        <span class="mui-icon iconfont icon-data" id="bigdata"></span>
	        <span class="mui-tab-label" id="bigdatata">大数据</span>
	    </a>
	     <a class="mui-tab-item" href="html/find.html">
	        <span class="mui-icon iconfont icon-pengyouquan" id="find"></span>
	        <span class="mui-tab-label" id="findta">发现</span>
	    </a>
	     <a class="mui-tab-item" href="html/know.html">
	        <span class="mui-icon iconfont icon-iconxuexi" id="know"></span>
	        <span class="mui-tab-label" id="knowta">知道</span>
	    </a>
</nav>


//script部分
//mui初始化
		mui.init();
//我的五个子页面
		var subpages = ['html/home.html', 'html/message.html', 'html/bigdata.html','html/find.html','html/know.html'];
		var subpage_style = {
			top:'0px',
			bottom: '51px'
		};
		
		
		var aniShow = {};
		
		 //创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < subpages.length; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if (i > 0) {
					sub.hide();
				}else{
					temp[subpages[i]] = "true";
					mui.extend(aniShow,temp);
				}
				self.append(sub);
			}
		});
		 //当前激活选项
		var activeTab = subpages[0];
		
		 //选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
				return;
			}
			//显示目标选项卡
			//将目标选项卡的icon替换
			changeIcon(targetTab);
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;
		});
		 //自定义事件，模拟点击“首页选项卡”，在有需要的地方可以直接调用这种自定义事件
		document.addEventListener('gohome', function() {
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			//console.log(current);
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
		});
		
		
		//点击底部选项卡，替换icon图标
		function changeIcon(targetTab){
			var home = document.getElementById('home');
			var message = document.getElementById('message');
			var bigdata = document.getElementById('bigdata');
			var find = document.getElementById('find');
			var know = document.getElementById('know');
			
			var hometa = document.getElementById('hometa');
			var messageta = document.getElementById('messageta');
			var bigdatata = document.getElementById('bigdatata');
			var findta = document.getElementById('findta');
			var knowta = document.getElementById('knowta');
			
			if(targetTab=='html/home.html'){
				home.classList.remove('icon-shouye');
				home.classList.add('icon-shouye2');
				home.classList.add('public-icon-style');
				hometa.classList.add('public-icon-style');
				
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
				
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
			}else if(targetTab=='html/message.html'){
				message.classList.remove('icon-icon-xinfeng');
				message.classList.add('icon-icon-xinfeng2');
				message.classList.add('public-icon-style');
				messageta.classList.add('public-icon-style');
				
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
			}else if(targetTab=='html/bigdata.html'){
				bigdata.classList.remove('icon-data');
				bigdata.classList.add('icon-data2');
				bigdata.classList.add('public-icon-style');
				bigdatata.classList.add('public-icon-style');
				
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
			}else if(targetTab=='html/find.html'){
				find.classList.remove('icon-pengyouquan');
				find.classList.add('icon-pengyouquan2');
				find.classList.add('public-icon-style');
				findta.classList.add('public-icon-style');
				
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
				
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
			}else if(targetTab=='html/know.html'){
				know.classList.remove('icon-iconxuexi');
				know.classList.add('icon-iconxuexi2');
				know.classList.add('public-icon-style');
				knowta.classList.add('public-icon-style');
				
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				
			}
			
		}//其实做这种动态原理很简单，就是你点击某个选项卡的时候，把它原来图标CSS给
//删除了，然后重新添加一个图标CSS，其实我们做APP，主要还是做原理，做页面，比如第一篇文章说的
//做那种缩放效果，你知道了原理就好做了，并不是什么神奇的不得了的东西，但是你加上了，整个APP感
//觉就动态了，高级了，APP后台交互不就是你传参数，后台返回你数据，这么简单，重点还
//是看HTML+CSS+JS+MUI(封装框架),一点个人心得，大家见笑

代码留下了，当然需要几张图来直观感受下，是我自己正在做的APP，一点点完成，一点点记录，希望能帮到有需要的人

大家看我的信息选项卡就是这种效果，未点击就是信封闭合状态，一点击就打开，是不是很有意思，也许你觉得P用没有，那就PASS咯，只是个人喜好，希望APP能动感一点，好了，今天就记录到这。

猜你喜欢

转载自blog.csdn.net/dreamxie0326/article/details/81414846
MUI
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022