Micro letter applet custom title bar

Micro-channel applet can set a custom title bar can be set separately for different pages
1. On the page file .json file, set the following properties, custom navigation bar and the navigation bar style "navigationStyle": "custom", "navigationBarTextStyle": "white",
　　in particular the second capsules navigationBarTextStyle style property can be adjusted to transparency

2. custom setting layout style navigation logic, dynamic efficiency

3. the key stroke! ! ! Navigation bar status bar height navigation bar height capsules height, need to know the layout of these three attributes + compatible
　　dimensions here are px units!
　　3.1 Status Bar height
　　　　status column refers to an area display information of mobile phone battery time signals. Follows with reference to FIG.

　　　　

　　Phone status bar on the market use a variety of height, full-screen iOS screen as bangs special models and other models Andrews.
　　The method of obtaining the status bar height: micro-channel call wx.getSystemInfoSync () API to obtain the status bar height

　　3.2 navigation bar height
　　　　region of the capsule and the function button display. Refer to the following picture

　　　　

　　　　Navigation method for obtaining height: 48px iOS 40px Andrews this is fixed. Under real machine environment, the editor margin of error

　　3.3 capsule height
　　　　at the test results of various models are 32px

　4. Scroll the page to change the title bar opacity
　　　here recommended pages of a listening event onPageScroll monitor page scrolling. Set the title bar background opacity rgba
　　　this should be noted that not every rational use setData scroll data are set, or may cause the page Caton and other effects of

the test models:
Andorid: 6 millet millet oppoR9s MIX3
the iPhone: the X-7P XS XR

The relevant code:

  // set the height of the navigation bar 
  setNavigation () {
     // Get the system information, the unit PX 
    const = systeminfo wx.getSystemInfoSync ()
     // status bar height 
    const = statusBarHeight systemInfo.statusBarHeight
     // the iOS real machine capsules height region 40 
    the let navigationHeight = 40 // capsules height region, Andrews 48 IF (! systemInfo.system.indexOf ( 'the Android') == -1 ) { 
      navigationHeight = 48 
    } // set the this .setData ({ 
      statusBarHeight: statusBarHeight, 
      navigationHeight: navigationHeight, 
      systemWidth: systemInfo.screenWidth 
    })
    
    
    
    
    // upper right corner of capsules, height 32px. Each device consistent 
  },
   // monitor page scrolling 
  onPageScroll: function (E) {
     // only a predetermined region in the setData 
    IF (e.scrollTop < the this .data.systemWidth) { 
      const Opacity = (e.scrollTop * 2) / the this .data.systemWidth
       IF (Opacity> =. 1 ) {
         IF ( the this .data.statusBarOpacity. 1 ==! ) {
           the this .setData ({ 
            statusBarOpacity: Opacity 
          }) 
        } 
      } the else {
         the this.setData({
          statusBarOpacity: opacity
        })
      }
    }
  }