2021-09-07

一、tabBar

1.tabBar

tabBar是底部导航，在pages.json中配置，代码如下：

"tabBar": {
	    "color": "#333333",
	    		"selectedColor": "#f06c7a",
	    		"borderStyle": "black",
	    		"backgroundColor": "#FFFFFF",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "static/img/tabBar/home.png",//图片地址
	        "selectedIconPath":"static/img/tabBar/home-on.png",//选中 后图片的样子
	        "text": "首页"
	    }, {
	        "pagePath": "pages/catalog/catalog",
	        "iconPath": "static/img/tabBar/category.png",
	       "selectedIconPath":"static/img/tabBar/category-on.png",
	        "text": "分类"
	    },
		{
		    "pagePath": "pages/cart/cart",
		    "iconPath": "static/img/tabBar/cart.png",
		   "selectedIconPath":"static/img/tabBar/cart-on.png",
		    "text": "购物车"
		},
		{
		    "pagePath": "pages/profile/profile",
		    "iconPath": "static/img/tabBar/user.png",
		    "selectedIconPath":"static/img/tabBar/user-on.png",
		    "text": "我的"
		}
		]
	}

注意：代码要放在globalStyle外面。

2.tabBar的一些属性说明

3.tabBar中list的一些属性说明

pagePath：页面的路径
text：文字
iconPath：图片的路径
selectedIconPath：选中时图片的路径

4.tabBar中midButton 的一些属性说明

width:按钮的宽度
height：按钮的高度
text：按钮上面的文字
iconPath：中间按钮的文字路径
iconWidth：图片的宽度，高度会等比例缩放
backgroundImage：按钮的背景图片的路径

总结

uni-app的学习要和官方文档相结合，官网地址是https://uniapp.dcloud.io/