uniapp mounted阶段获取不到dom的原因及解决方法

1,403 阅读1分钟

mounted中打印 dom信息为null

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

原因:
mounted阶段,若需要获取的元素或组件有v-ifv-for属性。
v-if的初始化结果为falsev-for遍历的数组初始化阶段无值。(即mounted阶段后,根据获得的后台数据来动态操作dom)这两种情况都会导致mounted阶段获取元素的语句获取不到dom。

解决办法:
1、把获取元素的语句放在异步获取到数据,赋值给data中的key之后进行。同时需要给获取元素的语句加上setTimeout。因为setTimeout是宏任务,会在vuerender函数执行之后再执行。

2、把获取元素的语句放到updated周期中执行。这种情况下每次视图更新之后都会执行一次获取元素的语句,如果不需要每次视图更新之后都执行,可以在mounted周期中,使用this.$once("hook: updated", function() {...}) ,让获取元素的语句只在updated阶段执行一次。

来源链接:www.readke.com/c/0116424BH…