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

效果图
在这里插入图片描述
因为官网自定义底部导航栏的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页面中

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

猜你喜欢