Taro / 小程序 获取 DOM 元素的位置

介绍

需要用到Taro.createSelectorQuery() 方法(小程序方法为wx.createSelectorQuery()), 由于该方法获取DOM需要一定的时间，直接使用会获取到null，所以封装成Promise对象

函数封装

这里用Taro 为例

/**
 * 获取元素位置
 * @param {*} elements 需要查找的元素的名称(类名、id)
 * @returns 查找元素的位置的集合，传入字符串则为对象，传入数组，则为数组
 */
export const getElementsSite = (elements) => {
  const query = Taro.createSelectorQuery();
  if (typeof elements === 'string') {
    // 查找单个DOM
    query.select(elements).boundingClientRect();
  } else if (typeof elements === 'object') {
    // 查找多个DOM
    for (const key of elements) {
      query.select(key).boundingClientRect();
    }
  }

  return new Promise((resolve, reject) => {
    query.exec(res => {
      resolve(res)
    })
  })
}

使用

// 单个DOM
let element = '#top'; // 写选择器
getElementsSite(element).then(res => {
  console.log(res); // 此时res为一个对象
})

// 多个DOM
let elements = [  // 选择器的集合
  '#top',
  '.detail'
];
getElementsSite(elements).then(res => {
  console.log(res); // 此时res为一个数组，包含所有DOM位置的集合
})