h***@geely.com
h***@geely.com
  • 发布:2024-01-03 09:29
  • 更新:2024-01-03 14:34
  • 阅读:163

在uni-app x 自定义组件的 mounted 函数执行时,页面元素是否已挂载?

分类:uni-app x

在uni-app x 自定义组件的 mounted 函数执行时,通过 refs 获取元素,再通过getBoundingClientRect获取长宽,得到是的 NAN,是因为此时元素还没渲染吗? 那组件初次渲染完成有对应的生命周期或者其他代替方案吗?

2024-01-03 09:29 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

可以用onReady 和 uni.getElementById 来获取长宽
参考下面的代码片段
DOM参考文档:https://doc.dcloud.net.cn/uni-app-x/dom/#getdomnode

<template>  
    <view>  
        <view id="viewId">  
            <text>11111</text>  
        </view>  
    </view>  
</template>  

<script lang="uts">  
    export default {  
        onReady() {  
            const viewDom = uni.getElementById('viewId') as Element  
            console.log(viewDom.offsetHeight)  
            console.log(viewDom.offsetWidth)  
        }  
    }  
</script>
  • 爱豆豆

    onReady() {  
    uni.createSelectorQuery().select('#viewId').boundingClientRect().exec((ret) => {
    const dom = ret[0] as NodeInfo
    console.log(dom.width) // 节点的宽度
    console.log(dom.height) // 节点的高度
    })
    }

    2024-01-03 11:31

YUANRJ

YUANRJ

  • h***@geely.com (作者)

    感谢!不过onReady 不是页面的生命周期吗? 我在组件里面使用并没有执行。uni.createSelectorQuery() 可行!

    2024-01-03 14:23

  • YUANRJ

    回复 h***@geely.com: 是的,已更新回复

    2024-01-03 14:39

要回复问题请先登录注册