微信小程序中使用tabBar
生活随笔
收集整理的這篇文章主要介紹了
微信小程序中使用tabBar
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 前景知識(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": ["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)題。
- 上一篇: C++第三方库管理工具vcpkg使用教程
- 下一篇: KBQA-Bert学习记录-CRF模型