解决uni-app+vue3+setup开发微信小程序,如果是子组件,使用boundingClientRect会获取不到值的问题

1,689 阅读1分钟

小程序获取dom只能用createSelectorQuery,如果是子组件,后面可以额外加一个参数in来指定获取dom的范围。小程序里面可以直接.in(this),但是vue3没有this了,那就只能通过getCurrentInstance去获取当前实例代替this ,注意这里需要用解构的方法把proxy引进来

// const instance = getCurrentInstance(); 不要直接这样用
const { proxy } = getCurrentInstance();
const getElementTop = () => {
    new Promise ((resolve, reject) => {
        let view = uni.createSelectorQuery().in(proxy)
        view.selectAll('.main-item').boundingClientRect(data => {
            // 这样一来data就就值了
            resolve(data)
        }).exec()
    }).then(res => {
        let topArray = res.map(item => {
            return item.top - scrollTopSize.value
        })
        topArr.value = topArray
    })
}