uni-app $nextTick无效

uni-app $nextTick无效

开发环境 版本号 项目创建方式
Windows 10.0.18363 HBuilderX
Android Android 10 -
手机厂商 手机机型 -
华为 荣耀8x -

操作步骤：




# 预期结果：

实际结果：




## bug描述：

请求到后台数据后，渲染视图（vm），需要获取渲染完成后元素的高度并滚动
封装的方法：

```javascript
toTopHeight() {  
    const query = uni.createSelectorQuery()  
    query.select('#id-top-box').boundingClientRect((data => {  
        console.log(data, "#id-top-box data")  
        uni.pageScrollTo({  
                scrollTop: data.height,  
                duration: 0  
        });  
    })).exec()  
},

以上封装的方法，核心是调用的时候是需要在再次更新完视图后调用，也就是需要这样调用：

this.$nextTick(() => {  
        this.toTopHeight()  
})

有时无效…




![img](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210415/631810aafb14ee38f136618dfa270108.jpg)
![img](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210415/e2e1e1807fd225e0fcb9d986d4ceecbf.jpg)

更多关于uni-app $nextTick无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请问解决了嘛 我也遇到了- -

更多关于uni-app $nextTick无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也发现this.$nextTick在页面渲染元素后，想获取元素高度获取不到，后来也是用setTimout才可以，我的部分代码是这样的
setTimeout(()=>{
if(item.remark){
let query = uni.createSelectorQuery();
let textHeight,wrapperHeight;

query.select(`.text-wrapper-${item.id}`).boundingClientRect(data=>{  
  wrapperHeight = data.height;  
})  

query.select(`.text-${item.id}`).boundingClientRect(data=>{  
  textHeight = data.height;  
})  

query.exec(res=>{  
  // 当文本内容高度大于父容器高度时，为溢出状态  
  if(textHeight > wrapperHeight){  
    item.isOverflowed = true;  
  }else{  
    item.isOverflowd = false;  
  }  
})

}else {
item.isOverflowed = false;
}
})

在uni-app中，$nextTick有时无效可能与页面渲染时机或异步操作有关。根据你的代码，问题可能出现在以下方面：

  1. 数据更新与DOM渲染的时序问题：$nextTick确保在下次DOM更新后执行，但如果数据更新后涉及复杂计算或嵌套组件，可能仍需额外延迟。尝试结合setTimeout作为备选方案：
    this.$nextTick(() => {
  setTimeout(() => {
    this.toTopHeight();
  }, 100);
});
回到顶部