mui 基于tabbar的再次封装

电玩女神 2022-05-29 11:48 167阅读 0赞

界面图：

![20180323103102479][]

相关代码：

TabBar.js

function tabbar() {
    	this.subpages = []; //页面的html
    	this.tabBarTitles = []; //标题名
    	this.tabBarSelectImages = []; //选中的图片
    	this.tabBarUnSelectImages = []; //未选中的图片
    	this.tabBarSelectTextColor = []; //选中的文本颜色
    	this.tabBarUnSelectTextColor = []; //未选中的文本颜色
    	this.defaultSelectIndex = 0; //默认选中的索引
    	var subpage_style = {
    		top: '0px',
    		bottom: '51px'
    	};
    	var aniShow = {};
    	var aArr = []; //a标签数组
    	var imgArr = []; //img标签数组
    	var labelSpanArr = []; //span标签数组
    	
    	this.init = function() { //添加视图
    		var nav = document.querySelector("nav");
    		for(var i = 0; i < tabbar.subpages.length; i++) {
    			var a = document.createElement("a");
    			a.className = "mui-tab-item mui-active";
    		    a.href = tabbar.subpages[i];
    			a.id = i;
    			aArr.push(a);
    			nav.appendChild(a);
    			
    			var span = document.createElement("span");
    			span.className = "mui-icon";
    		    	var img = document.createElement("img");
    		    img.width = "20";
    		    img.height = "20";
    		    	if(i == tabbar.defaultSelectIndex) {
    		    		img.src = tabbar.tabBarSelectImages[i];
    			}else {
    		    		img.src = tabbar.tabBarUnSelectImages[i];
    			}
    			imgArr.push(img);
    			span.appendChild(img);
    			a.appendChild(span);
    
    			var span2 = document.createElement("span");
    			span2.className = "mui-tab-label";
    			span2.innerHTML = tabbar.tabBarTitles[i];
    			if(i == tabbar.defaultSelectIndex) {
    				span2.style.color = tabbar.tabBarSelectTextColor[i];
    			}else {
    				span2.style.color = tabbar.tabBarUnSelectTextColor[i];
    			}
    			labelSpanArr.push(span2);
    			a.appendChild(span2);
    		}
    	}
    
    	this.showTabBar = function() {
    		//创建子页面，首个选项卡页面显示，其它均隐藏；
    		mui.plusReady(function() {
    			var self = plus.webview.currentWebview();
    			for(var i = 0; i < tabbar.subpages.length; i++) {
    				var temp = {};
    				var sub = plus.webview.create(tabbar.subpages[i], tabbar.subpages[i], subpage_style);
    				if(i == tabbar.defaultSelectIndex) {
    					temp[tabbar.subpages[i]] = "true";
    					mui.extend(aniShow, temp);
    				} else {
    					sub.hide();
    				}
    				self.append(sub);
    			}
    		});
    		//当前激活选项
    		var activeTab = tabbar.defaultSelectIndex;
    		//选项卡点击事件
    		mui('.mui-bar-tab').on('tap', 'a', function(e) {
    			var targetTab = this.getAttribute('href');
    			var id = this.getAttribute('id');
    			if(targetTab == id) {
    				return;
    			}
    			for (var i=0; i<labelSpanArr.length; i++) {
    				var label = labelSpanArr[i];
    				label.style.color = tabbar.tabBarUnSelectTextColor[i];
    				var img = imgArr[i];
    				img.src = tabbar.tabBarUnSelectImages[i];
    			}
    			labelSpanArr[id].style.color = tabbar.tabBarSelectTextColor[id];
    			imgArr[id].src = tabbar.tabBarSelectImages[id];
    
    			//显示目标选项卡
    			//若为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 = id;
    		});
    	}
    }

使用：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/mui.min.js"></script>
    		<script src="libs/TabBar.js"></script>
    		<link href="css/mui.min.css" rel="stylesheet" />
    	</head>
    	<body>
    		<nav id="nav" class="mui-bar mui-bar-tab" style="background:black;">
    		</nav>
    		<script type="text/javascript" charset="utf-8">
    			mui.init();
    			var tabbar = new tabbar();
    			tabbar.subpages = ['swiper.html', 'tab-webview-subpage-about.html', 'tab-webview-subpage-setting.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html'];
    			tabbar.tabBarSelectTextColor = ['blue', 'blue', 'blue', 'blue', 'blue'];
    			tabbar.tabBarUnSelectTextColor = ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF'];
    			tabbar.tabBarTitles = ['上下翻页', '首要', '消息', '通讯录', '设置'];
    			tabbar.tabBarSelectImages = ['images/live_icon_s.png', 'images/chart_icon_s.png', 'images/map_icon_s.png', 'images/up_data_s.png', 'images/up_data_s.png'];
    			tabbar.tabBarUnSelectImages = ['images/live_icon_u.png', 'images/chart_icon_u.png', 'images/map_icon_u.png', 'images/updata_icon_u.png', 'images/updata_icon_u.png'];
    			tabbar.defaultSelectIndex = 2;
    			tabbar.init();
    			tabbar.showTabBar();
    		</script>
    	</body>
    </html>

[20180323103102479]: /images/20220529/9903c8914cf948e6a2a631acb8fd2d02.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关基于Caffeine再次封装的本地缓存工具

引入maven依赖 caffeine、hutool、lombok <dependency> <groupId>com.githu

逃离我推掉我的手/ 2024年02月18日 13:29/ 0 赞/ 38 阅读

相关基于UIAlertController的封装调用

UIAlertController是iOS8之后推出的合并UIAlert和UIActionSheet的控件，我相信很多地方都会使用到的，因此在一个单例中对其进行封装一下，每次使

短命女/ 2023年10月17日 08:48/ 0 赞/ 189 阅读

相关 vue简单 tabbar封装

TabBar.vue <template> <div id="tab-bar"> <slot></slot> </div>

冷不防/ 2023年07月22日 04:56/ 0 赞/ 13 阅读

相关自己将ajax的Post和get方法再次封装

摘要：这里我将jauery的ajax再次封装更方便我的使用。 > 创建一个 \[commonUtils.js\] 的文件，用于存放封装的方法 window.base

绝地灬酷狼/ 2023年06月20日 06:57/ 0 赞/ 2 阅读

相关小程序封装tabbar

项目需求两种tabbar，外部tabbar有一个入口里面套了一个商城，商城有自己的tabbar，外部tabbar进入部分菜单时有限制条件，判断用户是否登录，是否

爱被打了一巴掌/ 2022年11月15日 11:29/ 0 赞/ 225 阅读

相关微信小程序引入vant封装tabbar

1、先创建一个custom-tab-bar文件夹，然后在微信开发者工具里面找到该文件夹，点击右键新建一个component； ![在这里插入图片描述][watermark_

冷不防/ 2022年10月12日 01:41/ 0 赞/ 140 阅读

相关基于Android VideoView播放器的封装

源码已开源到Github：[SuperVideoView][]，有兴趣的朋友可以fork，顺便记得star哈![吐舌头][tongue.gif]~ 之前在

左手的ㄟ右手/ 2022年06月17日 11:56/ 0 赞/ 325 阅读

相关 android 关于封装tabbar，任意修改样式

![Center][] 主要代码： package com.sun.framework.CustomizeVC; import a

ゝ一纸荒年。/ 2022年06月10日 14:12/ 0 赞/ 161 阅读

相关 mui 基于tabbar的再次封装

界面图： ![20180323103102479][] 相关代码： TabBar.js function tabbar() { thi

电玩女神/ 2022年05月29日 11:48/ 0 赞/ 168 阅读

相关 MUI点击图片放大，再次点击关闭

css部分可自己创建.css文件，然后引入到html页面中使用。 .mui-preview-image.mui-fullscreen { position

秒速五厘米/ 2022年02月04日 01:39/ 0 赞/ 631 阅读