uniapp（2）自定义tabbar

创建tabbar

1、系统用的tabbar

javascript 复制代码

"tabBar": {
		"selectedColor": "#00b5ff",//选中的文字颜色
		"fontSize": "20rpx",//字体大小
		"height": "130rpx",//高度
		"list": [
			{
				"pagePath":"pages/home/home",
				"text": "首页",
				"selectedIconPath": "static/ic_home_col.png",//选中的图标样式
				"iconPath": "static/ic_home_gray.png"
				
			},
			{
				"pagePath":"pages/mission/mission",
				"text": "任务广场",
				"iconPath": "static/ic_guangchang_gray.png",
				"selectedIconPath": "static/ic_guangchang_col.png"
				
			},
			{
				"pagePath": "pages/myMission/myMission",
				"text": "我的任务",
				"iconPath": "static/ic_task_gray.png",
				"selectedIconPath": "static/ic_task_col.png"
				
			},{
				"pagePath": "pages/my/my",
				"text": "我的",
				"selectedIconPath": "static/ic_mine_col.png",
				"iconPath": "static/ic_mine_gray.png"
				
			}
		]
	}

2、使用组件tabbar或者自定义tabbar

这里使用uView的自定义tabbar

在需求中，有点击选中未选中icon的样式大小，文字大小还有tabbar的高度问题，

利用view在tabbar外包一层，设置需要的高度，颜色设置成组件一致颜色

利用slot进行独立配置是否激活状态

html 复制代码

<view class="bottomBar">
		<u-tabbar :value="value" @change="name => value = name" 
:fixed="fase" :placeholder="true"
			activeColor="#00adff" 
:safeAreaInsetBottom="false">
			<u-tabbar-item text="首页">
				<view class="push_icon" slot="active-icon">
				<u-image src="/static/ic_home_col.png" 
width="16px" height="16px">
</u-image>
				</view>
				<view slot="inactive-icon">
					<u-image src="/static/ic_home_gray.png"
 width="16px" height="16px">
</u-image>
				</view>
				</u-tabbar-item>
				<u-tabbar-item text="任务广场"></u-tabbar-item>
				<u-tabbar-item text="我的任务"></u-tabbar-item>
				<u-tabbar-item text="个人中心"></u-tabbar-item>
			</u-tabbar>
	</view>

调用@change="name => value = name"为你配置的value值

使用<u-tabbar-item text="首页" @click="clicktabbar">事件进行点击匹配跳转