這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中如何實(shí)現(xiàn)底部導(dǎo)航欄，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作和成都溫江機(jī)房的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗(yàn)和案例。

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

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

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

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

2. 添加配置文件

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

   "tabBar": {  "color": "#a9b7b7",  "selectedColor": "#11cd6e",  "borderStyle": "white",  "list": [
    {      "selectedIconPath": "images/1.png",      "iconPath": "images/2.png",      "pagePath": "pages/index/index",      "text": "首頁(yè)"
    },
    {      "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": "測(cè)試"
    }
  ]
}

以上只是基礎(chǔ)的部分，當(dāng)然了小程序的官方文檔提供了更多的豐富的組件和樣式

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

圖片.png

{  "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": "首頁(yè)",      "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"
  }  
}

關(guān)于“微信小程序中如何實(shí)現(xiàn)底部導(dǎo)航欄”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前題目：微信小程序中如何實(shí)現(xiàn)底部導(dǎo)航欄-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://aaarwkj.com/article8/dpsjop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、微信公眾號(hào)、品牌網(wǎng)站建設(shè)、虛擬主機(jī)、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈

廣告

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