微信小程序中获取元素高度的方法与要点

why 2147 2024-07-22

微信小程序如何获取元素的高度

微信小程序如何获取元素的高度    

1、获取元素的高度（px单位）：

1

2

3

4

5

let query = wx.createSelectorQuery();

query.select('.content').boundingClientRect(rect=>{

  let height = rect.height;

  console.log(height);

}).exec();

2、获取元素的高度（rpx单位），使用宽高比换算获得：（以下的750是该元素的宽度，单位是rpx的）

1

2

3

4

5

6

7

8

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、在页面渲染完成OnReady回调，获取元素高度时，如果不加定时器，获取的元素的高度还是没渲染完异步数据前的高度。故需要加定时器

1

2

3

4

5

6

7

8

9

onReady () {

    setTimeout(() => {

    let query = wx.createSelectorQuery();

    query.select('.content').boundingClientRect(rect=>{

        let height = rect.height;

        console.log(height);

        }).exec();

    }, 300)

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 微信小程序 小程序 js
上一篇:微信小程序审核未通过的原因汇总
下一篇:微信小程序首页无法打开的解决措施
相关文章

 发表评论

暂时没有评论，来抢沙发吧~