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

刺骨的言语ヽ痛彻心扉 2022-04-24 08:54 414阅读 0赞

效果图  
![在这里插入图片描述][20190420202206295.png]  
因为官网 自定义底部导航栏的api需求的基础库版本比较高 以及组建的所以底部导航栏用的模块化封装的  
wxml部分

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页面中

[20190420202206295.png]: /images/20220217/44f5d9e2af1d49dbb0cbcf4b3229dd7a.png