微信小程序 获取元素高度(获取元素节点信息)

微信小程序开发中想要如h5一样获取元素的宽高值进行业务的功能实现,一开始不知道怎么实现,翻看文档发现,微信官方提供了一个非常好的东西

SelectorQuery wx.createSelectorQuery()

示例代码

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

1.如果高度要px单位的话:

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

2.如果高度要rpx单位的话,那么可以用宽高比换算获得:(以下的750是该元素的宽度,单位是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.在页面渲染完成OnReady回调 获取元素高度时,如果不加定时器,获取的元素的高度还是没渲染完异步数据前的高度。故需要加定时器

onReady () {
    setTimeout(() => {
    let query = wx.createSelectorQuery();
    query.select('.content').boundingClientRect(rect=>{
        let height = rect.height;
        console.log(height);
        }).exec();
    }, 300)
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 序言 原本题目写的时候实战经验,但是觉着算不上什么经验,就改成学习笔记了😂 注册小程序账号 开发和发布流程 小范围...
    RRRookieG阅读 6,787评论 0 3
  • 超荣幸能够参与我司【更美小程序】的搭建,在此分享些心得希望能够帮助到像我一样的前端界萌新。因【更美小程序】源码需保...
    呆恋小喵阅读 4,890评论 0 8
  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 10,287评论 0 7
  • 也许是从小身边环境的原因,中学时的未来规划就是成为一名技术工作者,大学毕业后如愿成为一名IT工程师,只是工作几年后...
    老猿漫说阅读 1,810评论 0 1
  • 感恩坚持早起拜忏110个,感恩女儿陪同拜了49个,背诵弟子规 读诵孝经,早上活动后女儿吃饭比以前多了,希望她能继续...
    一真一切真阅读 1,265评论 0 0

友情链接更多精彩内容