這篇文章將為大家詳細講解有關(guān)小程序怎樣實現(xiàn)主頁的tab選項功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專業(yè)從事做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)依托強大的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)！

效果圖：

實現(xiàn)底部Tab選項，只需要在項目根目錄下的app.json下修改

如圖：

------------------------------------------------------------------------------------------------------

先介紹一下app.json文件

默認有兩個代碼塊：1、pages
這里注冊了當(dāng)前小程序的所有頁面路徑2、window
這里用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

以上兩個詳細使用參考文檔，本文章不做介紹

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

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

而針對每一個單獨的tab 也有一些屬性進行配置：

官方示意圖：

具體實現(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圖片需要下載點擊和未點擊兩種狀態(tài)下的圖片。

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

三、app.json文件配置

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

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

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

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

"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"
      }
    ]
  }

四、單獨頁面的配置

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

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

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

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

         

　　官方文檔

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

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

　

關(guān)于“小程序怎樣實現(xiàn)主頁的tab選項功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章名稱：小程序怎樣實現(xiàn)主頁的tab選項功能-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/ehipg.html