微信小程序自定义底部导航栏

效果图

因为官网 自定义底部导航栏的api需求的基础库版本比较高 以及组建的所以底部导航栏用的模块化封装的
wxml部分

<template name="Tabbar">
    <cover-view class="tab-bar">
        <cover-view class="tab-bar-border"></cover-view>
        <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
            <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}">
            </cover-image>
           
            <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
        </cover-view>
    </cover-view>
</template>

js部分

// 获取应用实例
const App = getApp()

let _compData = {
	'_tabbar.color': "#7A7E83",
	'_tabbar.selectedColor': "#FC625D",
	'_tabbar.selected': 0,
	'_tabbar.list': [],
	'_tabbar.pageName': null
}
let _tabbarInstance = {
	initTabbar(e) {
		if (e.initPage) {
			this.setData({ '_tabbar.pageName': e.initPage, '_tabbar.selected': e.selected,})
			if (!this.hasInitTabbar) {
				this.hasInitTabbar = true
			let list = [{
				"iconPath": "/image/icon-home1.png",
				"selectedIconPath": "/image/icon-home2.png",
				"pagePath": "/pages/index/index",
				"text": "首页"
			},
			{
				"iconPath": "/image/icon-classify1.png",
				"selectedIconPath": "/image/icon-classify2.png",
				"pagePath": "/pages/shopDetail/shopDetail",
				"text": "分类"
			},
			{
				"iconPath": "/image/icon-shopCart1.png",
				"selectedIconPath": "/image/icon-shopCart2.png",
				"pagePath": "/pages/shopCart/shopCart",
				"text": "购物车"
			},
			{
				"iconPath": "/image/icon-my1.png",
				"selectedIconPath": "/image/icon-my2.png",
				"pagePath": "/pages/userCenter/userCenter",
				"text": "我的"
			}
			]
			this.setData({
				'_tabbar.list': list
			})
			}
		}
	},
	switchTab(e) {
		const data = e.currentTarget.dataset
		const url = data.path
		wx.switchTab({
			url
		})
	}
}

function Tabbar(PageInstance) {
	Object.assign(PageInstance, _tabbarInstance)
	PageInstance.setData(_compData)
	return this
}
module.exports = {
	Tabbar
}

wxss部分

.tab-bar { position: fixed;bottom: 0;left: 0;right: 0;height: 110rpx;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;position:relative }
.tab-bar-item cover-image { width: 30px;height: 30px; }
.tab-bar-item cover-view { font-size: 10px; }
.shop-cart-bage { position:absolute;left:50%;top:0;transform:translate(-50%);margin-left:40rpx;min-width:40rpx;height:40rpx;line-height:40rpx;border-radius:20rpx;background-color:rgba(252, 98, 93, 1);color:#fff;padding:0 10rpx;box-shadow:0 0 5px rgba(0, 0, 0, 0.5)}

例子 index.wxml页面调用

<!-- 自定义底部导航栏 -->
<import src="../../component/CustomTabbar/CustomTabbar.wxml" /> 
<template is="Tabbar" data="{{ ..._tabbar }}" />

缺点 因为组件是在page里面 第一次加载的时候tabbar闪动 影响用户体验，
由于这个缺点封装完之后 就没再用

对于解决tabbar闪动的方案我是把tabar作为一个页面 然后把每一个导航栏的内容封装成组件 插入tabar页面中