uniapp（2）自定义tabbar

创建tabbar

1、系统用的tabbar

"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进行独立配置是否激活状态

<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">事件进行点击匹配跳转