uni-app app端使用v-slot后导致nextTick时机不对

uni-app app端使用v-slot后导致nextTick时机不对

测试过的手机

iphone12(ios14.4) mumu安卓模拟器

操作步骤：

进入页面后等待一秒然后看控制台，两次输出都是0
使用v-slot，在更新数据之后，在nextTick内使用uni.createSelectorQuery()获取元素高度，得到的数据不对

预期结果：

可以获取正确高度

实际结果：

获取高度为0

bug描述：

前提：

  • 安卓 ios均测试过，均可复现
  • 没有使用uniapp，单纯使用vue，在h5里面是正常的
  • 不使用v-slot:xxx而使用slot="xxx"也是正常的

问题描述

使用v-slot，在更新数据之后，在nextTick内使用uni.createSelectorQuery()获取元素高度，得到的数据不对
个人猜测是nextTick的时机不对(？)

有案例在附件里面

  • page.vue + Layout.vue是不正常的
  • page1.vue + Layout.vue是正常的

附件下载


更多关于uni-app app端使用v-slot后导致nextTick时机不对的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app app端使用v-slot后导致nextTick时机不对的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 平台差异问题。在 App 端使用 v-slot 时，nextTick 的触发时机确实可能早于 DOM 实际渲染完成，导致 createSelectorQuery() 获取的高度为 0。

解决方案：

  1. 使用 $nextTick 双重保障：
this.$nextTick(() => {
  this.$nextTick(() => {
    uni.createSelectorQuery()...
  })
})
  1. 添加 setTimeout 延迟：
this.$nextTick(() => {
  setTimeout(() => {
    uni.createSelectorQuery()...
  }, 50)
})
回到顶部