微信小程序获取元素当前的位置

前言:

在使用小程序开发应用的时候,涉及到一个应用关于图片延迟加载,即如果当前图片不在屏幕显示区域则不加载图片,以节省资源带宽,这里就会涉及到计算当前图片距离顶部的位置.开发方式,使用taro进行小程序开发.

 

开始写代码:

最开始的时候在官网上查询获得了以下的方式:

const query = Taro.createSelectorQuery() // 创建类似dom获取节点的方式
query.select('.gj-img').boundingClientRect() // 获取元素位置 类似dom获取元素位置信息方式
query.exec(function (res) {
  console.log(res)
}) // 执行

但是你在使用后却仍无法获取相关的信息,
返回了 [null]

于是开始排查问题,首先api是没问题,那就可能是渲染的问题了,可能在执行的时候并没有找到我的这个img元素,所以返回了null,于是就试了一下用setTimeout延迟执行该方法:

setTimeout(()=>{
  const query = Taro.createSelectorQuery()
  query.select('.gj-img').boundingClientRect()
  query.exec(function (res) {
    console.log(res)
  })
},0)

然后就能正常获取元素信息了.


总结:
    之所以想到是这个原因,是因为后面在执行滚动的时候,这个元素是能够正常返回位置信息的,这种类似的问题碰到过很多次了,记录一下..
Author: kaykie

发表评论

邮箱地址不会被公开。