微信小程序中底部導(dǎo)航欄怎么實現(xiàn)-創(chuàng)新互聯(lián)

這篇文章主要介紹了微信小程序中底部導(dǎo)航欄怎么實現(xiàn)，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于芮城企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。芮城網(wǎng)站建設(shè)公司,為芮城等地區(qū)提供建站服務(wù)。全流程按需設(shè)計網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

底部導(dǎo)航欄是如何實現(xiàn)？即點擊底部的導(dǎo)航，會實現(xiàn)不同對應(yīng)頁面之間的切換。

我們先來看個我們要實現(xiàn)的底部導(dǎo)航欄的效果圖：（三個導(dǎo)航圖標(biāo)示例，微信小程序最多能加5個）

微信小程序中底部導(dǎo)航欄怎么實現(xiàn)

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

阿里圖標(biāo)庫 http://www.iconfont.cn/collections/show/29

在這個網(wǎng)站上下載一些自己要用到的圖標(biāo)，比如人員頭像，home主頁等一些常用的圖標(biāo)，直接點擊下載保存到本地，修改一下命名。也可以使用UI準(zhǔn)備好的圖標(biāo)。

微信小程序中底部導(dǎo)航欄怎么實現(xiàn)

回到項目里，新建一個images文件夾，將剛剛下載好的圖標(biāo)放在文件夾底下備用，將上述起好名字的圖標(biāo) 保存到 小程序 項目目錄中 新創(chuàng)建的 images 文件夾中，準(zhǔn)備工作就做好了。

微信小程序中底部導(dǎo)航欄怎么實現(xiàn)

微信小程序中底部導(dǎo)航欄怎么實現(xiàn)

2. 添加配置文件

我們找到項目根目錄中的配置文件 app.json 加入如下配置信息（app.json文件用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。）

   "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#11cd6e",
  "borderStyle": "white",
  "list": [
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/index/index",
      "text": "首頁"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/test/test",
      "text": "測試"
    }
  ]
}

微信小程序中底部導(dǎo)航欄怎么實現(xiàn)

以上只是基礎(chǔ)的部分，當(dāng)然了小程序的官方文檔提供了更多的豐富的組件和樣式
參考文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK，結(jié)束，保存 編譯 就可以實現(xiàn)小程序的經(jīng)典的底部導(dǎo)航效果了

==============
附錄：一份完整代碼（可忽略不計）

微信小程序中底部導(dǎo)航欄怎么實現(xiàn)

{
  "pages":[
        "pages/index/index",
        "pages/category/category",
        "pages/topic/topic",        
        "pages/user/user",
        "pages/logs/logs"
  ],
  "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "WeiCMS",
        "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#8c8c8c",
    "selectedColor": "#f4645f",
    "backgroundColor": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }, 
    {
      "pagePath": "pages/category/category",      
      "text": "分類",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/topic/topic",      
      "text": "話題",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/user/user",      
      "text": "我的",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }  
    ],
    "position": "bottom"
  }  
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序中底部導(dǎo)航欄怎么實現(xiàn)”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站題目：微信小程序中底部導(dǎo)航欄怎么實現(xiàn)-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article12/dhicgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、軟件開發(fā)、商城網(wǎng)站、微信公眾號、定制網(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)

綿陽服務(wù)器托管