微信小程序获取节点的位置信息

最新推荐文章于 2025-02-23 21:18:22 发布

Misnice

最新推荐文章于 2025-02-23 21:18:22 发布

阅读量3.2k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/102972326

版权

微信小程序专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了在小程序中如何利用生命周期函数onLoad进行页面初始化，通过使用wx.createSelectorQuery获取节点布局信息，实现对页面布局的精确控制。具体包括节点的上边界坐标和显示区域的竖直滚动位置的获取，以及如何将这些信息设置到数据中以供后续使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  let _this = this;
  let query = wx.createSelectorQuery()
  query.select('.wrap').boundingClientRect()
  query.selectViewport().scrollOffset()
  query.exec(function (res) {
    console.log(res)
    // res[0].top       // 节点的上边界坐标
    // res[1].scrollTop // 显示区域的竖直滚动位置
    _this.setData({
      wrapTop: res[0].top 
    })
    console.log(_this.data.wrapTop);
  })
},