文章目錄

• 前景知識(shí)
• 小程序項(xiàng)目
• • app.json
  • pages/home/home.wxml
  • pages/camera/camera.wxml
  • pages/user/user.wxml
• 相關(guān)鏈接

前景知識(shí)

前面我們學(xué)習(xí)過(guò)：在app.json里對(duì)小程序進(jìn)行全局配置，app.json的文件內(nèi)容是一個(gè)JSON對(duì)象，包含很多屬性，其中一個(gè)常用屬性就是 tabBar。如果小程序是一個(gè)多tab應(yīng)用，就可以通過(guò)tabBar指定tab欄的表現(xiàn)，以及tab切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

tabBar 的屬性值也是一個(gè)對(duì)象，該對(duì)象包含以下常用屬性：

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

小程序項(xiàng)目

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

• 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

項(xiàng)目根目錄下新建文件夾：static，static下新建文件夾：images，images下新建文件夾：tabIcons，tabIcons下存放tabBar要用到的圖標(biāo)。

代碼涉及的主要文件有：

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": "首頁(yè)","navigationBarTextStyle": "white"},"tabBar": {"color": "#000000","selectedColor": "#971a22","backgroundColor": "#ffffff","list": [{"pagePath": "pages/home/home","text": "主頁(yè)","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": "個(gè)人中心","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>

相關(guān)鏈接

新建微信小程序項(xiàng)目

總結(jié)

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

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