微信小程式開發之Tabbar實例圖文詳解

這篇文章主要介紹了微信小程式開發之Tabbar實例詳解的相關資料,需要的朋友可以參考下

##微信小程式Tabbar

1 .下載微信小程式開發軟體;

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

2.掃描二維碼登錄，在手機點選確認登入

3.新建一個項目，這裡選擇無APPID，如果需要填寫APPID，需要到微信小程式裡面註冊，然後就可以取得APPID，填寫專案名稱，選擇專案目錄（

註解：微信小程式不會自己建立主目錄文件，所以先自己建立一個專案資料夾，然後選擇存放到這個資料夾），新增項目，就產生了一個專案工程，這是注意有一個單選單按鈕，如果取消這個單選按鈕，就會建立一個空的工程，我選擇選取這個按鈕；

4.然後得到一個新的工程，現在下方要放一個tabbar，先新建一個image目錄，點選目錄右鍵->新建->目錄

#5.點選image資料夾->硬碟打開，將

圖片拉入次目錄中，注意：圖片大小限制為40kb,尺寸81px * 81px;

# #6。先來看

目錄結構，程式有兩個目錄，一個pages和utils，其中pages裡面又包含index和logs，這個兩個目錄是兩個頁面（第一個頁面就是執行程式看到的，第二頁面是點擊我們的頭像出來的），我們就要這兩個頁面作為tabbar兩個頁面；

#點擊點擊app.

json

寫tabbar

控件

;

為了方便我把image放到了根目錄下，選擇image目錄點擊右鍵->硬碟開啟->將Image目錄
copy

到根目錄下，

刪除原始目錄就可以了，程式碼如下：

#方法說明：

color：未選擇字體顏色
selectedColor：選擇字體顏色

b

ord

erStyle:tabbar上方線的顏色white（僅支援白色和黑色）

#background

Color：tabbar背景顏色

network

Time###out：設定網路逾時時間#########debug：設定debug模式開啟#### ##效果如圖：##################注意：###list###的頁面不准在app.json的pages裡面註冊過；###

謝謝閱讀，希望能幫助大家，謝謝大家對本站的支持！

以上是微信小程式開發之Tabbar實例圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！