1. 創建頁面

刪除 pages 下的 index 文件夾

在 pages 文件夾處，右鍵 -> 選擇新建頁面

確認新建頁面的信息

由于咱們刪除了默認的index.vue頁面，導致編譯報錯

找到pages.json文件，把鼠標選中部分配置刪除即可

2. 配置 pages.json

刪除 index 路徑（這一步咱們上面已經做了）

新建 tabbar 節點

復制 圖標資源 文件夾下 tab-icons 文件夾到 static 文件夾中
這個需要自己去圖標網站下載
推薦使用阿里圖標庫
https://www.iconfont.cn/

3. 依次創建me和record頁面

4. 案例源碼

最終代碼如下：

{"pages": [{"path" : "pages/index/index","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/me/me","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/record/record","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","app-plus": {"background": "#efeff4"}},"tabBar": {"selectedColor": "#1296db","list": [{"pagePath": "pages/index/index","text": "主頁","iconPath": "static/tab-icons/index.png","selectedIconPath": "static/tab-icons/index-active.png"},{"pagePath": "pages/record/record","text": "記錄","iconPath": "static/tab-icons/record.png","selectedIconPath": "static/tab-icons/record-active.png"},{"pagePath": "pages/me/me","text": "我的","iconPath": "static/tab-icons/me.png","selectedIconPath": "static/tab-icons/me-active.png"}]} }

5. 效果圖

總結

以上是生活随笔為你收集整理的uniapp 创建与配置 tabbar的全部內容，希望文章能夠幫你解決所遇到的問題。

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