javascript创建app程序的TabBar

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28254093/article/details/80976132

此处的TabBar使用Javascript，未曾使用mui等，如果不是需要的请绕道

先上图

1.在HTML页面上准备一个容器

<div id="bottom"></div>

2.在之后引入最下面的js文件比如：

 <script type="text/javascript" src="../scripts/tabTool.js"></script>

3.配置参数

var tab=[
		{
			text:"首页",
			url:"http://www.baidu.com",
			iconPath:'https://bpic.588ku.com/original_pic/18/05/31/4d6c8a3e35df6126cfe93829b7391b52.jpg!/fw/248/unsharp/true/compress/true',
			clickCallBack:function(obj){
				alert(obj.url);
			}
		},
		{
			text:"个人",
			iconPath:'https://bpic.588ku.com/original_pic/18/06/24/716efedac500cd50bc66e590635300bd.jpg!/fw/248/unsharp/true/compress/true',
			url:"http://www.taobao.com",
		},
		{
			text:"设置",
			iconPath:'https://bpic.588ku.com/original_pic/18/04/18/ae31e4d46b023da15356f2009201af39.jpg!/fw/248/unsharp/true/compress/true',
			url:"http://www.csdn.com",
		}
	];

4.调用方法

createTab(tab,"bottom");

最后 具体的插件代码

/**
 *
 * 生成guid的方法
 */

function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}
/**
 *合并数据
 */
Object.extends= function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
		if(typeof source[property]=="object"){
			destination[property]["guid"]=guid();
		}else{
			destination["guid"]=guid();
		}
	}
	console.log(destination);
	return destination;
}
 
 /**
 * 处理数据 块
 * @param {} json  后台json数据
 * @param {} trName 前台模板tr cacheHtmls
 * @param {} isClear 是否替换多余符号
 * @returns {} object
 */
function stringFormat(json, cacheHtmls,isClear,isSplite) {
	isSplite||false;
	isClear||true;
    var tbodyHtml = "";
    for (var i = 0; i < json.length; i++) {
        var innerHtmls = cacheHtmls;
        for (var _json in json[i]) {
            var value = eval("(json[i]." + _json + ")");//==>json[i].ID
            var regex = new RegExp("[{]" + _json + "[}]", "g");
            innerHtmls = innerHtmls.replace(regex, value);
        }
        tbodyHtml +=isClear==true? innerHtmls.replace(/[{][a-zA-Z0-9]*[}]/g,""):innerHtmls;
        isSplite==true&&(tbodyHtml+=i>= json.length-1?"":",");
    }
   return tbodyHtml;
}
/**
 * tab item 的装饰HTML
 * @param {Object} json
 * @param {Object} id
 */ 
function itemHtml(){
	return '<div style="width:50px;height: 50px;float: left;margin-left: {margin};margin-right: {margin};">'+
    		'<a href="#" onclick="itemClick(\'{guid}\',\'{url}\')" style="text-decoration: none;">'+
    			'<div style="width: 30px;height: 30px;padding-left:10px;padding-right:10px;">'+
					'<img src="{iconPath}" style="width:100%;height:100%"></div>'+
    			'<div style="text-align:center"><div style="color: #848484;font-size: 8px;padding-top: 4px;">{text}</div></div>'+
    		'</a>'+
    	'</div>';
}

function tabStyle() {
    return {
        top_div:"position: fixed;margin-bottom: 0px;height: 50px;bottom: 0px;margin-left: 0px;width: 100%;margin-right: 0px;left: 0px;background-color:#f9f9f9;border-top: 1px solid #e6e3e3;",
    };
}
/**
 *
 * 具体创建方法
 * @param {Object} json
 * @param {Object} id
 */
function createTab(json, id) {
	var _json=[{text:"未知",url:"",iconPath:"",clickCallBack:null}];
	json=Object.extends(_json,json);
    var divs = document.getElementById(id);
    var styles=tabStyle();	
	divs.setAttribute("style",styles["top_div"]+";"+divs.getAttribute("style"));
	
	var cache=itemHtml();
	var itemJson=json;
	var val=stringFormat(itemJson,cache,false);
	//计算margin的左右宽度
	var widths=parseInt(((screen.availWidth||screen.width)-(itemJson.length * 50))/(itemJson.length*2));
	val=val.replace(/[{]margin[}]/g,widths+"px");
	divs.innerHTML=val;
	this.itemClick=function(guid,url){
		itemJson.filter(function(obj){
			if(obj["guid"]==guid){
				if(typeof obj["clickCallBack"]=="function"){
					obj["clickCallBack"](obj);
				}else{
					window.location.href=url;
				}
			}
		});
	}
	
	
}

有兴趣的朋友可以看一下