微信小程序自定义tabBar组件开发

今天看了微信官方文档

自定义 tabBar · 小程序 配置的路径要是同级下的第一级目录，满足不了我们需求所以自制了个tabBar组件,步骤如下:
开发前就应该 清除小程序自带的tabBa
很多在app.js里面调用wx.hideTabBar()方法清除微信小程序自己的tabBar();

onLoad: function (options) {
      wx.hideTabBar();
  },

1.新建tabTemplate文件夹用于保存tabBar模板，tabTemplate/index.wxml

<template name="tabBar">

	<cover-view class="tab-bar">
	
		<cover-view class="tab-bar-border"></cover-view>
	
			<cover-view wx:for="{{tabBar}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
		
			<navigator open-type="reLaunch" url="{{item.pagePath}}">
			
				<cover-image src="{{item.current== 1 ? item.selectedIconPath : item.iconPath}}"></cover-image>
				
				<cover-view style="color: {{item.current== 1 ? selectedColor : color}}">{{item.text}}</cover-view>
			
			</navigator>
		
		</cover-view>
	
	</cover-view>

</template>

2.tabTemplate/index.wxss

.tab-bar {

position: fixed;

bottom: 0;

left: 0;

right: 0;

height: 48px;

background: white;

display: flex;

padding-bottom: env(safe-area-inset-bottom);

}



.tab-bar-border {

background-color: rgba(0, 0, 0, 0.33);

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 1px;

transform: scaleY(0.5);

}



.tab-bar-item {

flex: 1;

text-align: center;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}



.tab-bar-item cover-image {

width: 27px;

height: 27px;

}



.tab-bar-item cover-view {

font-size: 10px;

}

.tab-bar-item:nth-child(4){

height: 75px;

}

.tab-bar-item:nth-child(4) cover-image{

width: 50px;

height: 50px;

margin-top: -30px;

}

3.tabTemplate/index.js,初始化数据

//初始化数据
function tabbarinit() {
	return [
	{
		"current": 0,
		"pagePath": "/pages/index/index",
		"text": "主页",
		"iconPath": "/images/icon/home-b-cion.png",
		"selectedIconPath": "/images/icon/home-a-cion.png"
	},
	{
		"current": 0,
		"pagePath": "/pages/ucenter/ucenter",
		"text": "导览",
		"iconPath": "/images/icon/guide-b-cion.png",
		"selectedIconPath": "/images/icon/guide-a-cion.png"
	},
	{
		"current": 0,
		"pagePath": "/pages/ucenter/ucenter",
		"iconPath": "/images/icon/release-b-cion.png",
		"selectedIconPath": "/images/icon/release-a-cion.png"
	},
	{
		"current": 0,
		"pagePath": "/pages/ucenter/ucenter",
		"text": "游记",
		"iconPath": "/images/icon/travels-b-icon.png",
		"selectedIconPath": "/images/icon/travels-a-icon.png"
	},
	{
		"current": 0,
		"pagePath": "/pages/ucenter/ucenter",
		"text": "个人中心",
		"iconPath": "/images/icon/member-b-icon.png",
		"selectedIconPath": "/images/icon/member-a-icon.png"
	}
	]
}

//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
	var that = target;
	var bindData = {};
	var otabbar = tabbarinit();
		otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
		otabbar[id]['current'] = 1;
		bindData[bindName] = otabbar
		that.setData({ bindData });
}
module.exports = {
	tabbar: tabbarmain
}

4.使用方法

先把样式文件载入app.wxss

@import "/tabTemplate/index.wxss";

新建一个页面，比如index.wxml,引入模板

<import src="../../tabTemplate/index.wxml"/>

index.js 初始化数据

var template = require('../../tabTemplate/index.js');

Page({

  onLoad: function () {
    template.tabbar("tabBar", 0, this)//0表示第一个tabbar
  },
})

导航样式完全有css控制 最终预览如下