pk10赛车计划软件百度云

Fuzhou website construction only needs 1,000 yuan including domain name space, details 18558752805

  • WeChat Mini Program-Custom Navigation Bar

Fuzhou Website Construction > Site News > WeChat Mini Program >

The WeChat header navigation bar may be configured through json:

But sometimes our project needs may require a custom header navigation bar, as shown below:

: Now specifically explain the implementation steps and use methods :

step:

1. Set "navigationStyle" to "custom" in app.json

In this way, only the capsule button in the upper right corner will be retained.

2. Calculate the correlation value

Because the height of the column in the head of different mobile phone models may be inconsistent, in order to adapt more models, we need to calculate 3 values:

As shown below:

1. The height of the entire navigation bar;

2. The distance between the capsule button and the top;

3. The distance of the capsule button from the right.

The applet can obtain the capsule button information through wx.getMenuButtonBoundingClientRect () and wx.getSystemInfo () to obtain the device information.

As shown below:

From this information we can calculate the three values mentioned above:

1. The height of the entire navigation bar = statausBarHeight + height + (top-statausBarHeight) * 2;

2. The distance between the capsule button and the top = top;

3. The distance between the capsule button and the right side = windowWidth-right.

App.js code is as follows:

Copy code
  App ({ 
    globalData: { 
   
    }, 
    function  () { onLaunch: function () { 
      =  wx.getMenuButtonBoundingClientRect(); let menuButtonObject = wx.getMenuButtonBoundingClientRect (); 
      wx.getSystemInfo ({ 
        =>  { let statusBarHeight =  res.statusBarHeight, success: res => { let statusBarHeight = res.statusBarHeight, 
            =  menuButtonObject.top,//胶囊按钮与顶部的距离navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2 ;//导航高度 this .globalData.navHeight =  navHeight; this .globalData.navTop =  navTop; this .globalData.windowHeight =  res.windowHeight; navTop = menuButtonObject.top, // the distance between the capsule button and the top navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top-statusBarHeight) * 2 ; // navigation height this .globalData.navHeight = navHeight; this .globalData.navTop = navTop; this .globalData.windowHeight = res.windowHeight; 
        }, 
        fail (err) { 
          console.log (err); 
        } 
      }) 
    } 
  }) 
Copy code

3. Because this head navigation is public, we better set it as a component named navbar

index.wxml:

Copy code
  view class ="navbar custom-class"  style ='height:{{navHeight}}px;background-color:{{bgColor}}' > < view wx:if ="{{showNav}}"  class ="navbar-action-wrap navbar-action-group row item-center"  style ='top:{{navTop}}px;background-color:rgba(255,255,255,.6)' > < ss-icon name ="back"  color ="{{iconColor}}"  size ="15px"  block ="{{true}}"  class ="navbar-action_item"  bind:click ="_navBack" ></ ss-icon > < ss-icon name ="index"  color ="{{iconColor}}"  size ="15px"  block ="{{true}}"  class ="navbar-action_item last"  bind:click ="_toIndex" ></ ss-icon > </ view > < view class ='navbar-title' style ='top:{{navTop}}px' >  {{pageName}} </ view > </ view > < view class = "navbar custom-class" style = 'height: {{navHeight}} px; background-color: {{bgColor}}' > < view wx: if = "{{showNav}}" class = "navbar -action-wrap navbar-action-group row item-center " style = 'top: {{navTop}} px; background-color: rgba (255,255,255, .6)' > < ss-icon name =" back " color = "{{iconColor}}" size = "15px" block = "{{true}}" class = "navbar-action_item" bind: click = "_ navBack" > </ ss-icon > < ss-icon name = "index " color =" {{iconColor}} " size =" 15px " block =" {{true}} " class =" navbar-action_item last " bind: click =" _ toIndex " > </ ss-icon > </ view > < view class = 'navbar-title' style = 'top: {{navTop}} px' > {{pageName}} </ view > </ view > 
Copy code

index.js:

Copy code
   components/navbar/index.js const App =  getApp(); // components / navbar / index.js const App = getApp (); 

  Component ({ 
    options: { 
      true , addGlobalClass: true , 
    /* * }, / * * 
     */  properties: { * Component properties list * / properties: { 
      pageName: String, 
      showNav: { 
        type: Boolean, 
        true  }, value: true }, 
      showHome: { 
        type: Boolean, 
        true  } value: true } 
    /* * }, / * * 
     */  data: { * Initial data of the component * / data: { 
   
    }, 
    lifetimes: { 
      function  () { this .setData({ attached: function () { this .setData ({ 
          navH: App.globalData.navHeight 
        }) 
       } 
    /* * }, / * * 
     */  methods: { // 回退 navBack: function  () { * List of component methods * / methods: { // fallback navBack: function () { 
          wx.navigateBack ({ 
            1  }) delta: 1 })       
      // 回主页 toIndex: function  () { }, // Back to home page toIndex: function () { 
        wx.navigateTo ({ 
          '/pages/admin/home/index/index'  }) url: '/ pages / admin / home / index / index' }) 
      }, 
    } 
  }) 
Copy code

index.wxss:

Copy code
   components/navbar/index.wxss */  .navbar {  width :  100% ;  overflow :  hidden ;  position :  relative ;  top :  0 ;  left :  0 ;  z-index :  10 ;  flex-shrink :  0 ; / * components / navbar / index.wxss * / .navbar { width : 100% ; overflow : hidden ; position : relative ; top : 0 ; left : 0 ; z-index : 10 ; flex-shrink : 0 ;
 {  width :  100% ;  box-sizing :  border-box ;  padding-left :  115px ;  padding-right :  115px ;  height :  32px ;  line-height :  32px ;  text-align :  center ;  position :  absolute ;  left :  0 ;  z-index :  10 ;  color :  #333 ;  font-size :  16px ;  font-weight :  bold ;  text-overflow :  ellipsis ;  overflow :  hidden ;  white-space :  nowrap ; } .navbar-title { width : 100% ; box-sizing : border-box ; padding-left : 115px ; padding-right : 115px ; height : 32px ; line-height : 32px ; text-align : center ; position : absolute ; left : 0 ; z-index : 10 ; color : # 333 ; font-size : 16px ; font-weight : bold ; text-overflow : ellipsis ; overflow : hidden ; white-space : nowrap ;
 {  display :  -webkit-flex ;  display :  flex ;  -webkit-box-align :  center ;  -ms-flex-align :  center ;  -webkit-align-items :  center ;  align-items :  center ;  position :  absolute ;  left :  10px ;  z-index :  11 ;  line-height :  1 ;  padding-top :  4px ;  padding-bottom :  4px ; } .navbar-action-wrap { display : -webkit-flex ; display : flex ; -webkit-box-align : center ; -ms-flex-align : center ; -webkit-align-items : center ; align-items : center ; position : absolute ; left : 10px ; z-index : 11 ; line-height : 1 ; padding-top : 4px ; padding-bottom : 4px ;
 {  border :  1px solid #f0f0f0 ;  border-radius :  20px ;  overflow :  hidden ; } .navbar-action-group { border : 1px solid # f0f0f0 ; border-radius : 20px ; overflow : hidden ;
 {  padding :  3px 0 ;  color :  #333 ; } .navbar-action_item { padding : 3px 0 ; color : # 333 ;
 {  border-right :  1px solid #f0f0f0 ;  padding :  3px 14px ; } .navbar-action-group .navbar-action_item { border-right : 1px solid # f0f0f0 ; padding : 3px 14px ;
 {  border-right :  none ; } .navbar-action-group .last { border-right : none ;
 } 
Copy code

index.json:

Ctrl + C to copy the code
Ctrl + C to copy the code


ss-icon is an icon component I customized, click to view . If you don't have this component, you can replace it with the <view> </ view> component where I use <ss-icon> </ ss-icon> and put your icon in it.

相关组件的介绍。 For the components that are not well understood, you can read the introduction of related components of WeChat Mini Program Components .

方法 : The component has been created. Now let's use the component:

Suppose we need to call this component in index.wxml,

1. Reference the component in index.json:

Copy code
  "usingComponents" : { "navbar": "/components/navbar/index"  } { "usingComponents" : { "navbar": "/ components / navbar / index" } 
  } 
Copy code

2. Use this component in index.wxml:

Copy code
  view class ='view-page' > < navbar page-name ="你当前页面的名字" ></ navbar > < view class ='page-content' > <!-- 这里放你的内容 --> </ view > </ view > < view class = 'view-page' > < navbar page-name = "your current page name" > </ navbar > < view class = 'page-content' > <!- put your content here-> </ view > </ view > 
Copy code

The final result is shown in the following figure:

3. Parameter description

parameter Description Types of Defaults
page-name Current page name String -
show-nav Whether to show the left icon button Boolean true
bg-color Navigation background color String #fff
icon-color Left icon color String # 000
custom-class Navigation style

Full code git address: WeChat applet custom navigation bar

Scan QR code to share on WeChat
confirm

Copyright © 2014-2019 buxie520.com Fuzhou Website Production