如何在微信小程序中實(shí)現(xiàn)主頁tab選項

這篇“如何在微信小程序中實(shí)現(xiàn)主頁tab選項”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何在微信小程序中實(shí)現(xiàn)主頁tab選項”文章吧。

如圖：

先介紹一下app.json文件

默認(rèn)有兩個代碼塊：

1、pages

這里注冊了當(dāng)前小程序的所有頁面路徑

2、window

這里用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

  我們看下app.json提供的另一個配置項：tabBar

   tabBar提供一些公有的屬性對tab配置：

 　而針對每一個單獨(dú)的tab 也有一些屬性進(jìn)行配置：

     官方示意圖：

 具體實(shí)現(xiàn)底部Tab功能：

 設(shè)定一個需求，假設(shè)當(dāng)前我們有兩個tab,一個'主頁'，一個'我的' ， 未選中灰黑色，選擇紅色。

 一、在pages目錄下創(chuàng)建兩個目錄，并創(chuàng)建想要的js、json、wxml、wxss相關(guān)文件

       名字隨意，這里舉例：home目錄（主頁Tab相關(guān)），mine目錄(我的Tab相關(guān))

二、在根目錄下新建一個目錄，取名images(隨意取)，用于存放圖片，這里tab需要使用

　　1、在阿里素材庫下載幾個，注意tab圖片需要下載點(diǎn)擊和未點(diǎn)擊兩種狀態(tài)下的圖片。

       2、講圖片資源復(fù)制到自己建的用于存圖片的目錄下   

三、app.json文件配置

      1、在pages屬性中配置項目所有的頁面路徑，我們這個例子就兩個，home,mine

"pages":[
  "pages/home/home",
  "pages/mine/mine"
 ]

　   2、添加tabBar 屬性 ， 定義一些狀態(tài)

            根據(jù)文章前面部分講解，進(jìn)行一些必要屬性的配置

"tabBar":{
  "color": "#333333",
  "selectedColor": "#ff0000",
  "backgroundColor": "#fff",
  "list":[
   {
    "pagePath":"pages/home/home",
    "text":"主頁",
    "iconPath":"images/home.png",
    "selectedIconPath":"images/home_selected.png"
    
   },
   {
    "pagePath":"pages/mine/mine",
    "text":"我的",
    "iconPath": "images/mine.png",
    "selectedIconPath":"images/mine_selected.png"
   }
  ]
 }

{
 "pages":[
 "pages/home/home",
 "pages/mine/mine"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 },
 "tabBar":{
 "color": "#333333",
 "selectedColor": "#ff0000",
 "backgroundColor": "#fff",
 "list":[
  {
  "pagePath":"pages/home/home",
  "text":"主頁",
  "iconPath":"images/home.png",
  "selectedIconPath":"images/home_selected.png"
  },
  {
  "pagePath":"pages/mine/mine",
  "text":"我的",
  "iconPath": "images/mine.png",
  "selectedIconPath":"images/mine_selected.png"
  }
 ]
 }
}

四、單獨(dú)頁面的配置

　　一個頁面包含js、hson、wxml、wxss等相關(guān)文件。

      這里不再多具體介紹，只添加一個小需求，點(diǎn)擊tab切換相關(guān)頁面，該頁面標(biāo)題要和tab一致，頁面內(nèi)容也和tab一致，用于說明tab效果正確實(shí)現(xiàn)。

      1、設(shè)置單獨(dú)頁面的頁面標(biāo)題，這個需求是在json文件中配置實(shí)現(xiàn)的。

　　　主需要在單獨(dú)頁面路徑下的json文件中添加屬性：

 　　　　官方文檔

     2、在頁面中顯示與tab一致的文字

　　   頁面內(nèi)容搭建（ui繪制代碼）是在單獨(dú)頁面路徑下的wxml文件中配置實(shí)現(xiàn)的。

以上就是關(guān)于“如何在微信小程序中實(shí)現(xiàn)主頁tab選項”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。