1. 創(chuàng)建頁(yè)面

刪除 pages 下的 index 文件夾

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

確認(rèn)新建頁(yè)面的信息

由于咱們刪除了默認(rèn)的index.vue頁(yè)面，導(dǎo)致編譯報(bào)錯(cuò)

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

2. 配置 pages.json

刪除 index 路徑（這一步咱們上面已經(jīng)做了）

新建 tabbar 節(jié)點(diǎn)

復(fù)制 圖標(biāo)資源 文件夾下 tab-icons 文件夾到 static 文件夾中
這個(gè)需要自己去圖標(biāo)網(wǎng)站下載
推薦使用阿里圖標(biāo)庫(kù)
https://www.iconfont.cn/

3. 依次創(chuàng)建me和record頁(yè)面

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": "主頁(yè)","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. 效果圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。