小程序實踐（一）：主頁tab選項實現

番茄西紅柿發布于2019-04-23 13:34 / 642人閱讀

摘要：這里不再多具體介紹，只添加一個小需求，點擊切換相關頁面，該頁面標題要和一致，頁面內容也和一致，用于說明效果正確實現。

官方文檔

效果圖：

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

如圖：

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

先介紹一下app.json文件

默認有兩個代碼塊：
1、pages
這里注冊了當前小程序的所有頁面路徑
2、window
這里用于設置小程序的狀態欄、導航條、標題、窗口背景色。

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

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

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

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

官方示意圖：

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

具體實現底部Tab功能：

設定一個需求，假設當前我們有兩個tab,一個主頁，一個我的，未選中灰黑色，選擇紅色。

一、在pages目錄下創建兩個目錄，并創建想要的js、json、wxml、wxss相關文件

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

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

　　1、在阿里素材庫下載幾個，注意tab圖片需要下載點擊和未點擊兩種狀態下的圖片。

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

三、app.json文件配置

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

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

　 2、添加tabBar 屬性，定義一些狀態

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

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

app.json

四、多帶帶頁面的配置

　　一個頁面包含js、hson、wxml、wxss等相關文件。

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

1、設置多帶帶頁面的頁面標題，這個需求是在json文件中配置實現的。

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

　　　　官方文檔

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

　　頁面內容搭建（ui繪制代碼）是在多帶帶頁面路徑下的wxml文件中配置實現的。

　　　　官方文檔

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

小程序實踐（一）：主頁tab選項實現

小程序實踐（二）：swiper組件實現輪播圖效果

小程序實踐（三）：九宮格實現及item跳轉

小程序實踐（四）：動態控制組件的顯示/隱藏

小程序實踐（五）：for循環綁定item的點擊事件

小程序實踐（六）：view內部組件排版

小程序實踐（七）：頁面間傳值

小程序實踐（八）：驗證碼倒計時功能

小程序實踐（九）：返回到上一個界面并傳值回去

小程序實踐（十）：textarea實現簡單的編輯文本界面

小程序實踐（十一）：showModal的使用

小程序實踐（十二）：七牛云上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2059.html

小程序實踐（二）：swiper組件實現輪播圖效果

摘要：組件類似于中的，實現類似輪播圖的效果，相對于的實現起來更加方便，快捷。swiper組件類似于Android中的ViewPager，實現類似輪播圖的效果，相對于Android的Viewpager,swiper實現起來更加方便，快捷。效果圖：首先看下swiper支持的屬性： --------------------------------------------------------...

番茄西紅柿 2019-04-23 13:34 評論0 收藏0
小程序實踐（三）：九宮格實現及item跳轉

摘要：效果圖實現效果圖紅色線包含部分的九宮格效果，并附帶點擊時間。效果圖：實現效果圖紅色線包含部分的九宮格效果，并附帶item點擊時間。 ------------------------------------------------------------------------------------------------------ 具體實現： 1、首先添加圖片資源文件　在...

番茄西紅柿 2019-04-23 13:34 評論0 收藏0
一次完整的react hooks實踐

摘要：本次需求其實就兩個邏輯輸入篩選項。當發生改變時，重新渲染頁面首次進入頁面時，無任何篩選項。關于的一些，官方也有很棒的文檔寫在后面本文通過工作中的一個小需求，完成了一次的實踐，不過上述代碼依然有很多需要優化的地方。寫在前面 showImg(https://segmentfault.com/img/bVbpBgw?w=1000&h=563); 本文首發于公眾號：符合預期的CoyPan R...

kuangcaibao 2019-08-26 13:35 評論0 收藏0
微信小程序音樂播放器,leancloud后端支持,體驗小程序數據綁定,Promise較為優雅解決回調

摘要：初窺添加音樂到收藏最近列表歌詞滾動從一個開始微信開發者工具生成目錄如下主頁日志頁面工具大體為每一個即是一個頁面文件，每個頁面有一個文件規定描述頁面的這四個文件必須具有相同的路徑與文件名。 showImg(https://segmentfault.com/img/remote/1460000009405866);showImg(https://segmentfault.com/img/r...

go4it 2019-08-20 16:31 評論0 收藏0