微信小程序開發筆記(三)--底部導航欄，頂部標題欄設置

基礎庫 2.5.0 開始支持自定義 tabBar...

 

1.准備三個頁面，首頁（home），消息（info），我的（mine）

選擇pages文件夾 右鍵-->新建文件夾 -->新建 home 文件夾-->再選中 home 文件夾 右鍵-->新建 Page，保持和文件夾名相同，同理建消息（info），我的（mine）。

app.json里自動幫我們注冊了

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/home/home",
    "pages/info/info",
    "pages/mine/mine"
  ],

我們可以把我們想要先展示的頁面放到前面

"pages": [
    "pages/home/home",
    "pages/info/info",
    "pages/mine/mine",
    "pages/index/index",
    "pages/logs/logs"   
  ],

 

2.准備6張圖片，三張選中時的圖片，三張未選中時的圖片，建立一個images文件夾，和pages文件夾同級，

在app.json里面添加代碼段：

"tabBar": {
    "color": "#A1ABB2",
    "selectedColor": "#1DB1CF",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/homeon.png",
        "iconPath": "images/homeoff.png",
        "pagePath": "pages/home/home",
        "text": "主頁"
      },
      {
        "selectedIconPath": "images/infoon.png",
        "iconPath": "images/infooff.png",
        "pagePath": "pages/info/info",
        "text": "信息"
      },
      {
        "selectedIconPath": "images/mineon.png",
        "iconPath": "images/mineoff.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }

解釋一下

"color": "#A1ABB2",   //導航欄字體的顏色 
"selectedColor": "#1DB1CF",　　//導航欄選中時字體的顏色
"borderStyle": "black",　//導航欄上邊框顏色,字段需為 black 或 white　

"selectedIconPath": "images/homeon.png",　　//導航欄選中時展示的圖片
"iconPath": "images/homeoff.png",　　//導航欄未選擇時展示的圖片
"pagePath": "pages/home/home",   //導航欄對應的頁面地址 
"text": "主頁"　　//導航欄對應的文字 

基礎庫 2.5.0 開始支持，低版本需做兼容處理。如果覺得官方的很丑，或者需求原因，當然可以自定義啦，比如用：swipe,swp-item實現...

推薦看到的一個網友文章：https://www.cnblogs.com/ljybill/articles/10419706.html

官方傳送門

 

3.公共頂部標題區域

在app.json里面添加代碼段：

"window": { 
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "light",
    "backgroundColor": "#eee"
  },

解釋一下

"navigationBarBackgroundColor": "#fff",　　//頂部標題區域背景色
"navigationBarTitleText": "微信小程序",　　//全局頂部標題文字
"navigationBarTextStyle": "black",　　//頂部標題文字顏色
"enablePullDownRefresh": true,　　//是否開啟下拉刷新，字段需為 true 或 false
"backgroundTextStyle": "light",　　//下拉刷新三個點點的顏色，字段為 dark 或 light
"backgroundColor": "#eee"　　//下拉刷新顯示的區域背景顏色

官方傳送門

設置單個頁面，就在單個頁面文件夾下的json文件夾中配置，如home.json：

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "主頁",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "backgroundColor": "#eee"
}

再推薦一個網友的上拉加載更多：https://www.jianshu.com/p/cc3a516224ee

 

簡單記錄一下。。。不足之處，歡迎指出。謝謝！