文章目錄

• 前景知識
• 小程序項目
• • app.json
  • pages/home/home.wxml
  • pages/camera/camera.wxml
  • pages/user/user.wxml
• 相關鏈接

前景知識

前面我們學習過：在app.json里對小程序進行全局配置，app.json的文件內容是一個JSON對象，包含很多屬性，其中一個常用屬性就是 tabBar。如果小程序是一個多tab應用，就可以通過tabBar指定tab欄的表現，以及tab切換時顯示的對應頁面。

tabBar 的屬性值也是一個對象，該對象包含以下常用屬性：

• color，tab上文字的默認顏色，僅支持十六進制顏色，必填。
• selectedColor，tab上文字選中時的顏色，僅支持十六進制顏色，必填。
• backgroundColor，tab的背景顏色，僅支持十六進制顏色，必填。
• position，tabBar的位置，僅支持兩個值：bottom和top ，默認值是bottom。
• list，tab的列表，是一個數組，數組元素最少2個，最多5個。每個數組元素都是一個對象，包含以下屬性值：
  • pathPath，頁面路徑，必須在pages中定義，必填。
  • text，tab上的文字，必填。
  • iconPath，圖片路徑，非必填。icon大小限制為40kb，建議尺寸為81px*81px，不支持網絡圖片。當position值為top時，不顯示icon。
  • selectedIconPath，選中時的圖片路徑，非必填。icon大小限制為40kb，建議尺寸為81px*81px，不支持網絡圖片。當position為top時，不顯示icon。

小程序項目

pages下新建Page：home（主頁）、camera（拍照）、user（個人中心）。

• pages/home/home.wxml、home.wxss、home.js、home.json
• pages/camera/camera.wxml、camera.wxss、camera.js、camera.json
• pages/user/user.wxml、user.wxss、user.js、user.json

項目根目錄下新建文件夾：static，static下新建文件夾：images，images下新建文件夾：tabIcons，tabIcons下存放tabBar要用到的圖標。

代碼涉及的主要文件有：

app.json

pages/home/home.wxml

pages/camera/camera.wxml

pages/user/user.wxml

app.json

{"pages": ["pages/home/home","pages/camera/camera","pages/user/user"],"window": {"navigationBarBackgroundColor": "#971a22","navigationBarTitleText": "首頁","navigationBarTextStyle": "white"},"tabBar": {"color": "#000000","selectedColor": "#971a22","backgroundColor": "#ffffff","list": [{"pagePath": "pages/home/home","text": "主頁","iconPath": "/static/images/tabIcons/home.png","selectedIconPath": "/static/images/tabIcons/home-fill.png"},{"pagePath": "pages/camera/camera","text": "拍照","iconPath": "/static/images/tabIcons/camera.png","selectedIconPath": "/static/images/tabIcons/camera-fill.png"},{"pagePath": "pages/user/user","text": "個人中心","iconPath": "/static/images/tabIcons/user.png","selectedIconPath": "/static/images/tabIcons/user-fill.png"}]},"style": "v2","sitemapLocation": "sitemap.json" }

pages/home/home.wxml

<view class="camera">Here is Home Page </view>

pages/camera/camera.wxml

<view class="camera">Here is Camera Page </view>

pages/user/user.wxml

<view class="camera">Here is User Page </view>

相關鏈接

新建微信小程序項目

總結

以上是生活随笔為你收集整理的微信小程序中使用tabBar的全部內容，希望文章能夠幫你解決所遇到的問題。

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