這篇文章主要介紹“微信小程序中底部導(dǎo)航欄目開發(fā)的方法”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“微信小程序中底部導(dǎo)航欄目開發(fā)的方法”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、豐縣網(wǎng)絡(luò)推廣、小程序制作、豐縣網(wǎng)絡(luò)營銷、豐縣企業(yè)策劃、豐縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供豐縣建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：chinadenli.net

微信小程序 底部導(dǎo)航欄目開發(fā)

我們先來看個效果圖

這里，我們添加了三個導(dǎo)航圖標(biāo)，因為我們有三個頁面，微信小程序最多能加5個。

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

1. 圖標(biāo)準(zhǔn)備

進(jìn)入該網(wǎng)站，鼠標(biāo)滑到一個喜歡的圖標(biāo)上面  點擊下方的 下載按鈕

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

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

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": "開心測試" 
  }] 
 },

解釋一下 對應(yīng)的屬性信息

tabBar  指底部的 導(dǎo)航配置屬性

color  未選擇時 底部導(dǎo)航文字的顏色

selectedColor  選擇時 底部導(dǎo)航文字的顏色

borderStyle  底部導(dǎo)航邊框的樣色（注意 這里如果沒有寫入樣式 會導(dǎo)致 導(dǎo)航框上邊框會出現(xiàn)默認(rèn)的淺灰色線條）

list   導(dǎo)航配置數(shù)組

selectedIconPath 選中時 圖標(biāo)路徑

iconPath 未選擇時 圖標(biāo)路徑

pagePath 頁面訪問地址

text  導(dǎo)航圖標(biāo)下方文字

關(guān)于“微信小程序中底部導(dǎo)航欄目開發(fā)的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

本文題目：微信小程序中底部導(dǎo)航欄目開發(fā)的方法-創(chuàng)新互聯(lián)
文章起源：http://chinadenli.net/article14/degpde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、云服務(wù)器、App設(shè)計、網(wǎng)站改版、網(wǎng)站制作

廣告

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