How to get the height of an element in WeChat applet

How to get the height of the element in the WeChat applet

1. Get the height of the element (px unit):

let query = wx.createSelectorQuery();
query.select('.content').boundingClientRect(rect=>{
  let height = rect.height;
  console.log(height);
}).exec();

2. Get the height of the element (rpx unit), use the aspect ratio conversion to get: (the following 750 is the width of the element, the unit is rpx)

let query = wx.createSelectorQuery();
query.select('.content').boundingClientRect(rect=>{
  let clientHeight = rect.height;
  let clientWidth = rect.width;
  let ratio = 750 / clientWidth;
  let height = clientHeight * ratio;
  console.log(height);
}).exec();

3. After the page rendering is completed, OnReady callback, get When setting the height of an element, if no timer is added, the height of the element obtained is still the height before the asynchronous data is rendered. Therefore, you need to add a timer

onReady () {
    setTimeout(() => {
    let query = wx.createSelectorQuery();
    query.select('.content').boundingClientRect(rect=>{
        let height = rect.height;
        console.log(height);
        }).exec();
    }, 300)
}

PHP Chinese website, a large number of freesmall program development tutorials, welcome to learn!

The above is the detailed content of How to get the height of an element in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!