Wechat applet - screen height

screenheight Represents the height of the mobile screen ( Including the top status bar and webview Render area and tabbar And navigation bar )
windowHeight representative webview Area , It does not include the status bar, navigation bar and tabbar,
If set pages.json in navigationStyle Value custom, that windowHeight representative webview Add the status bar and the navigation bar , barring tabbar

SelectorQuery.select ( Select node | The first match in the page )

wx.createSelectorQuery().in(that).select(el).boundingClientRect().exec(res => {

page({
    
	onLoad () {
    
		this.queryFixedElementInfo();
	},
	
  	//  Query the height of the ceiling element 
	queryFixedElementInfo () {
    
	  //  Get one  'SelectorQuery'  example 
	  const query = wx.createSelectorQuery();
	
	  //  choice  id  by  'fixed-content'  Page elements of , Query its layout location 
	  query.select('#fixed-content').boundingClientRect();
	
	  // empty-element  Select a node that does not exist on the page , Also initiate a query , I just want to remind you to look at the code snippet , For uncertain data , Try to give a default value when taking values , Or judge the data type and then carry out the corresponding operation , In order to avoid incorrect operation , Affect the subsequent logic 
	  //  The actual application scenario may be , Use  wx:if  Elements of control , Not rendered at query 
	  query.select('#empty-element').boundingClientRect();
	
	  //  Official annotation : ' Execute all requests  *** The result of the request forms an array in the order of the request ***  stay callback In the first parameter of .'
	  query.exec(res => {
    
	    const [ fixedElement, emptyElement ] = res;
	    
	    //  The first item is the query page node  '#fixed-content'  The return value of ,
	    const {
     bottom, dataset, height, left, right, top, width } = fixedElement || {
    };
	    //  Query the width and height of the element itself in the object 
	    console.log(`%c  Query the width and height of the element ：${
      width} * ${
      height}`, 'color: #282C34');
	    /** * top  Is the distance from the top , bottom Is the distance from the bottom of the element to the top  *  You can adjust the position of elements in the interface by yourself  * bottom - top === height; * console.log(bottom - top === height); // true */
	    console.log(`%c  Query the boundary coordinates of the element relative to the view \n On ：${
      top}\n Next ：${
      bottom}\n Left ：${
      left}\n Right ：${
      right}`, 'color: #a52222');
	    //  Query the custom attributes carried in the element 
	    console.dir(dataset);
	
	    //  Because the second item does not exist in the page , So there is no return value , Remember to give a default value when taking values from inside 
	    const {
     id } = emptyElement || {
    };
	    console.log(`%c  The value obtained by deconstruction is ：${
      id},  But there is no error , If necessary, you can assign a default value when deconstructing `, 'color: red');
	    /**  The following wording will report an error , Affect the subsequent business logic  */
	    // console.log(res[1].id || emptyElement.id);
	
	    // do sth...
	    //  Record  '#fixed-content'  Distance from the top 
	    this.setData({
     fixedTop: top });
	  });
	},

	//  Page slide event 
	onPageScroll (e) {
    
	  const {
     scrollTop } = e;
	  const {
     fixedTop, isFixed } = this.data;
	  if (scrollTop >= fixedTop && !isFixed) {
    
	    this.setData({
     isFixed: true });
	    return;
	  }
	  if (scrollTop < fixedTop && isFixed) {
    
	    this.setData({
     isFixed: false });
	    return;
	  }
	},
}

1. Different scopes ：screenHeight Is the height of the integrated mobile screen ,windowHeight yes webview（ Mobile notification bar is not included 、 Applet title bar and tabBar） Height ;

The picture above shows us from systemInfo The actual performance of the obtained data , Apple X Take Liu Haiping as an example （ The principle of all Android bangs is similar ）： The outermost red box is the screen size , The blue box is the security area, which literally means the page area that developers can manipulate , The yellow box above is the status bar of the mobile phone , The green area is what we want to customize navigationBar.

so , Navigation bar safeArea The upper part of , If you use the native navigation bar , Below the navigation bar is the real controllable range .
In fact, our custom navigation bar is also in this safeArea The inner is most harmonious with the capsule . The key reason is that wechat takes the capsule button in the upper right corner as a built-in component , Only black and white , That is, we can't change its size, position, transparency, etc , So in order to match the capsule button , The general customized navigation bar position is also consistent with the position in the figure above .

Height

The following is an example , The red box above is statusBar, The height is known ; The red box below is the text , Sandwiched in the middle is one of the solutions navigationBarHeight; The yellow is the original capsule button, which is also in the vertical center , The height of the capsule button is known based on the coordinate information in the upper left corner , It's not hard to get out ,navigationBarHeight = Blue frame height × 2 + Capsule button .height.（ Blue frame height = Capsule button .top - statusBarHeight）

Function directly return Promise,await Get yes Object

wx.createSelectorQuery().in(this)
query
.select(‘.ec-canvas’)
.fields({ node: true, size: true })
.exec(res => {