下拉加载更多组件 uni-load-more 如果更新状态太快 uni-app h5 端会报错

下拉加载更多组件 uni-load-more 如果更新状态太快 uni-app h5 端会报错

接口响应15毫秒，使用 `setTimeout` 模拟 15 毫秒，多刷新页面几次就会报错，`setTimeout` 调成 100 毫秒基本没有问题。

Uncaught TypeError: Cannot read properties of null (reading ‘offsetWidth’) at uni-h5.es.js:7052:25 at callWithErrorHandling (vue.runtime.esm.js:1375:22) at callWithAsyncErrorHandling (vue.runtime.esm.js:1384:21) at HTMLDivElement.invoker (vue.runtime.esm.js:9729:9)


### 图片

![Image 1](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20231019/4cfc472971b0de269e3b6ee5c98cefa9.png)

![Image 2](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20231019/acc19278d475ef9ed43972ac48a06967.png)

更多关于下拉加载更多组件 uni-load-more 如果更新状态太快 uni-app h5 端会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

应该是你直接写在setup中执行的太快了 组件都没渲染完就执行了 你放到onLoad onReady中 试试 import {onLoad,onReady} from ‘@dcloudio/uni-app’
onLoad(() => {
// 改变组件初始状态
loadingStatus.value = ‘loading’
// 模拟接口响应
setTimeout(() => {
loadingStatus.value = ‘more’
},15)
})

更多关于下拉加载更多组件 uni-load-more 如果更新状态太快 uni-app h5 端会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这种我也试了，一样会报错，不过我用 vue2创建项目写同样的代码不报错，在 vue3 中就报错，最后解决只展示文字，要是再报错，只能直接写一个改文字就可以了

参照 https://ask.dcloud.net.cn/question/170612 感觉是图片的问题，把 loading 图关掉就不报错了 uni-load-more 的 showIcon 改成 false

这个错误是由于uni-load-more组件在H5端快速更新状态时导致的DOM操作问题。当接口响应太快时，组件可能在DOM还未完全渲染时就尝试获取offsetWidth属性，从而引发空指针异常。

解决方法：

  1. 最简单的方案就是像你发现的，增加setTimeout延迟到100毫秒以上，确保DOM完成渲染
  2. 可以在调用loadMore方法前添加v-if条件判断，确保组件已挂载
  3. 检查是否在onLoad或onShow生命周期中直接触发了加载，建议改为在onReady中执行
  4. 确保每次加载完成后正确更新status状态，避免重复触发

核心原因是H5端的渲染机制与原生端不同，需要给DOM更新留出足够时间。这个问题在uni-app的较新版本中已经有所优化，可以考虑升级到最新版本。

代码示例：

// 改为在onReady中触发
onReady() {
  setTimeout(() => {
    this.loadMore()
  }, 100)
}
回到顶部