uniapp里面tabbar自定义的方法
作者:mmseoamin日期:2024-04-27

第一种不封装自定义tabbar,需要的页面tabbar

需要的步骤

第一步,pages.json需要

"tabBar": {
		"custom": true,//自定义
		"color": "#666666",
		"selectedColor": "#DF5458",
		"list": [{
				"pagePath": "pages/index1"
			},
			{
				"pagePath": "pages/index2"
			},
			{
				"pagePath": "pages/index3"
			},
			{
				"pagePath": "pages/index4"
			}
		]
	},

第二步对应的页面


			
				
				
			
			
				
				
			
			
				
				
			
			
				
				
			
		

uniapp里面tabbar自定义的方法,第1张

第二种封装的tabbar

引入组件,注册组件,给组件传当前页面数

uniapp里面tabbar自定义的方法,第2张

组件


就这两种



引入组件的页面样式加入

uniapp里面tabbar自定义的方法,第3张

uniapp里面tabbar自定义的方法,第4张

要不然不透

还有就是tabbar不定高度,就按照自己高度定

uniapp里面tabbar自定义的方法,第5张

如果定了高度就按照

uniapp里面tabbar自定义的方法,第6张

uniapp里面tabbar自定义的方法,第7张