微信小程序如怎么設置底部導航欄目

小編給大家分享一下微信小程序如怎么設置底部導航欄目，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在沿河等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供做網(wǎng)站、網(wǎng)站制作 網(wǎng)站設計制作按需求定制制作,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,成都品牌網(wǎng)站建設,成都全網(wǎng)營銷,外貿營銷網(wǎng)站建設,沿河網(wǎng)站建設費用合理。

詳解微信小程序設置底部導航欄目方法

小程序底部想要有一個漂亮的導航欄目，不知道怎么制作，于是百度找到了本篇文章，分享給大家。

好了 小程序的頭部標題 設置好了，我們來說說底部導航欄是如何實現(xiàn)的。

我們先來看個效果圖

這里，我們添加了三個導航圖標，因為我們有三個頁面，小程序最多能加5個。

那他們是怎么出現(xiàn)怎么著色的呢？兩步就搞定！

1. 圖標準備

阿里圖標庫

我們進入該網(wǎng)站，鼠標滑到一個喜歡的圖標上面  點擊下方的 下載按鈕

在彈出框中 選擇了 倆個不同顏色的 圖標  選擇64px大小即可，我選擇的是png  然后下載下來 起上別名

將上述起好名字的圖標 保存到 小程序 項目目錄中 新創(chuàng)建的 images 文件夾中，準備工作就做好了

2. 更改配置文件

我們找到項目根目錄中的配置文件 app.json 加入如下配置信息

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首頁" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "開心測試" 
  }] 
 },

解釋一下 對應的屬性信息

tabBar 指底部的 導航配置屬性
color 未選擇時 底部導航文字的顏色

selectedColor 選擇時 底部導航文字的顏色
borderStyle 底部導航邊框的樣色（注意 這里如果沒有寫入樣式 會導致 導航框上邊框會出現(xiàn)默認的淺灰色線條）
list  導航配置數(shù)組
selectedIconPath 選中時 圖標路徑
iconPath 未選擇時 圖標路徑
pagePath 頁面訪問地址

text 導航圖標下方文字

以上是“微信小程序如怎么設置底部導航欄目”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標題：微信小程序如怎么設置底部導航欄目
文章源于：http://www.muchs.cn/article18/ihpsgp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、ChatGPT、網(wǎng)站維護、響應式網(wǎng)站、App設計、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)