微信小程序中怎么實現底部導航欄

這篇文章主要介紹“微信小程序中怎么實現底部導航欄”，在日常操作中，相信很多人在微信小程序中怎么實現底部導航欄問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序中怎么實現底部導航欄”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1. 圖標準備

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

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

2. 添加配置文件

我們找到項目根目錄中的配置文件 app.json 加入如下配置信息（app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 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": "測試"
    }
  ]
}

OK，結束，保存 編譯  就可以實現小程序的經典的底部導航效果了

圖片.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": "首頁",      "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"
  }  
}

到此，關于“微信小程序中怎么實現底部導航欄”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！