微信小程序從零開始開發步驟(三)底部導航欄

上一章節,我們分享了如何創建一個新的頁面和設置頁面的標題,這一章我們來聊聊底部導航欄是如何實現的。即點擊底部的導航,會實現不同對應頁面之間的切換。

我們先來看個我們要實現的底部導航欄的效果圖:(三個導航圖標示例,微信小程序最多能加5個)


圖片.png

1. 圖標準備

阿里圖標庫 http://www.iconfont.cn/collections/show/29

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

圖片.png

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


圖片.png
圖片.png

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": "測試"
    }
  ]
}
圖片.png

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

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

github:https://github.com/wangxiaoting666/myproject

==============
附錄:一份完整代碼(可忽略不計)


圖片.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"
  }  
}

下一章:微信小程序從零開始開發步驟(四)微信小程序頁面自定義分享onShareAppMessage

文末福利:

福利一:前端,Java,產品經理,微信小程序,Python等資源合集大放送:http://www.lxweimin.com/p/e8197d4d9880
福利二:微信小程序入門與實戰全套詳細視頻教程

image

閱讀鏈接:
微信小程序從零開始開發步驟(一)搭建開發環境http://www.lxweimin.com/p/0ff8c3b2f59f
微信小程序從零開始開發步驟(二)創建小程序頁面http://www.lxweimin.com/p/fe0db14e2869
微信小程序從零開始開發步驟(三)底部導航欄http://www.lxweimin.com/p/89a63dc99839
微信小程序從零開始開發步驟(四)自定義分享的功能http://www.lxweimin.com/p/65d9bdb8051d
微信小程序從零開始開發步驟(五)輪播圖http://www.lxweimin.com/p/bc3261557031
微信小程序從零開始開發步驟(六)4種頁面跳轉的方法http://www.lxweimin.com/p/01a5a6a0fdb9
微信小程序從零開始開發步驟(七)引入外部js 文件http://www.lxweimin.com/p/5f2cde64d7f2
微信小程序從零開始開發步驟(八)引入框架WeUI:http://www.lxweimin.com/p/fd423b6e17be

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容