微信小程序 – 组件化 tabbar

微信小程序可以在 app.json 中配置默认的 tabBar，然而自带的 tabBar 只能实现页面间的跳转，无法实现譬如拨打电话等操作。

组件化 tabbar 顾名思义就是以组件化的方式将 tabbar 引入页面。

首先，新建微信小程序四个基本文件 tabBar.wxml  tabBar.wxss  tabBar.js  tabBar.json 放入自定义的一个文件夹内，可以命名为 components。

tabBar.wxml 内容如下：

tabBar.wxss 内容如下：

.icon{
	display: block;
	padding-top: 12rpx;
	margin: 0 auto;
	width:34rpx;
	height: 30rpx;
}
.tabBar{
	width:100%;
	position: fixed;
	bottom:0;
	background:#fff;
	font-size:24rpx;
	color:#7c7c7c;
	border-top: 1rpx solid #e3e3e3;
	overflow: hidden;
	line-height: 47rpx;
	z-index: 10;
}

.tabBar-item{
	float:left;
	width:25%;
	text-align: center;
	overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
	color: #232323;
}

.footerbh {
	width: 100%;
	height: 90rpx;
}

tabBar.js 内容如下：

function tabBarInit() {
	 return [{
		"active":0,
		"page_path": "/pages/index/index",
		"icon_path": "/images/tab_icon1.png",
		"active_icon_path": "/images/tab_icon1_hover.png",
		"text": "首页"
		},{
		"active": 0,
		"page_path": "/pages/classify/classify",
		"icon_path": "/images/tab_icon2.png",
		"active_icon_path": "/images/tab_icon2_hover.png",
		"text": "分类"
		},{
		"active": 0,
		"page_path": "/pages/cart/cart",
		"icon_path": "/images/tab_icon3.png",
		"active_icon_path": "/images/tab_icon3_hover.png",
		"text": "购物车"
		},{
		"active": 0,
		"page_path": "/pages/me/me",
		"icon_path": "/images/tab_icon4.png",
		"active_icon_path": "/images/tab_icon4_hover.png",
		"text": "我的"
		}
	]
}

function tabBarMain(bindName = "tabdata", id, target) {
	var that = target;
	var bindData = {};
	var otabbar = tabBarInit();
	otabbar[id]['icon_path'] = otabbar[id]['active_icon_path']//换当前的icon
	otabbar[id]['active'] = 1;
	bindData[bindName] = otabbar
	that.setData({ bindData });
}

module.exports = {
	tabbar: tabBarMain
}

tabBar.json 内容如下：

{
	"component": true,
	"usingComponents": {}
}

然后在需要显示 tabBar 的页面比如首页 index.wxml 中加入：