Small micro-channel program development notes (three) - the bottom of the navigation bar at the top title bar settings

Infrastructure Library 2.5.0 started to support custom tabBar ...

 

1. Prepare three pages, home page (home), news (info), I (mine)

Select pages File Right Folder -> New Folder -> New home folder -> then select the right home file folder -> New Page, and folders to keep the same name, built in the same way the message (info), I (mine).

app.json in registered automatically help us

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

We want to show that we can put to the front page

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

 

2. Prepare six pictures, the picture of the three selected, the picture of three is not selected, to create a folder images, pages and folders at the same level,

Add code segment app.json which:

"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": ""
      {"Information
      },
        selectedIconPath": "images/mineon.png",
        "iconPath": "images/mineoff.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }

explain

" Color " : " # A1ABB2 " , // navigation bar font color 
 " selectedColor " : " # 1DB1CF " , // when the navigation bar to select the font color
 " borderStyle " : " Black " , // border color on the navigation bar, field must be a black or White　

" selectedIconPath " : " ImagesRF Royalty Free / homeon.png " , // display the navigation bar when you select the picture
 " iconPath " : " ImagesRF Royalty Free / homeoff.png " , // Photo Gallery of the navigation bar is not selected
 . " pagePath ": "Pages and the / Home / Home " , // navigation bar corresponding page address 
 " text " : " Home "　　 // navigation bar corresponding text

Infrastructure Library 2.5.0 started to support low-compatible version to be done to deal with. If you think the official ugly, or the causes of demand, of course, you can customize it, such as using: swipe, swp-item achieve ...

Recommended to see a netizen article: https://www.cnblogs.com/ljybill/articles/10419706.html

The official portal

 

3. Public areas top title

Add code segment app.json which:

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

explain

" NavigationBarBackgroundColor " : " #fff " , // background color of the top banner area
 " navigationBarTitleText " : " micro-channel applets " , // global top title text
 " navigationBarTextStyle " : " Black " , // top header text color
 " enablePullDownRefresh " : true , // whether to open the drop-down refresh, the field must be a true or false
 " backgroundTextStyle " : " Light " , // drop-down refresh three little color, dark field or Light
 "backgroundColor": "#eee "　　 // drop-down refresh the display area of the background color

The official portal

Providing a single page, in a single page JSON file folders under the folder configuration, such as home.json:

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

Then recommend a netizen on Raja upload more: https://www.jianshu.com/p/cc3a516224ee

 

Simply record it. . . Shortcomings, welcome that. Thank you!