uView（Tabbar 底部导航栏）

（一）第一种方式

1，每个菜单页面都要

“首页” “发布” “我的” 每个页面都要

<template><view>首页<u-tabbar:list="tabBar" @change="changeEvent()" bg-color="rgb(51, 61, 73)"active-color="rgba(8,141,246, 1)"inactive-color="#fff"></u-tabbar></view>
</template><script>export default {data() {return {tabBar: '',}},onLoad() {this.tabBar = [{// pagePath(需以"/"开头)属性即可pagePath: "/pages/index/index",iconPath: "home",selectedIconPath: "home-fill",text: '首页',},{pagePath: "/pages/release/release",iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",text: '发布',// 在此配置midButton: true   在<u-tabbar 标签内配置  :mid-button="true"  表示此项为凸起按钮项// midButton: true,},{pagePath: "/pages/user/user",iconPath: "account",selectedIconPath: "account-fill",text: '我的',// isDot 为 true 时 “首页”角标将会以红点的形式显示 2// count: 2,// isDot: true,},]},methods: {}}
</script>

2，pages.json页面

{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path" : "pages/user/user","style" :                                                                                    {"navigationBarTitleText": "我的","enablePullDownRefresh": false}},{"path" : "pages/release/release","style" :                                                                                    {"navigationBarTitleText": "发布","enablePullDownRefresh": false}}],// 原生的导航"tabBar": {// 需要时HexColor，设置成red 无法识别，下方颜色设置同理// "color":"#000",// "backerStyle":"white",// "selectedColor":"#555",// "backgroundColor": "#e6e6e6","list": [{"pagePath": "pages/index/index"},{"pagePath": "pages/user/user"},{"pagePath": "pages/release/release"}]},
}