介绍
需要用到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位置的集合
})