（一）第一種方式

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"}]}, }

注意

（1）一定要添加 “tabBar” ！！！！！
（2） “tabBar” 名稱要和 .vue頁面里面 onLoad 的 this.onLoad 想通！！！！

總結

以上是生活随笔為你收集整理的uView（Tabbar 底部导航栏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。