报错截图
组件代码
<template>
<div>
<van-button @click="popupShow = true" block type="primary">发起操作</van-button>
<van-popup :style="{ width: '90%' }" v-model="popupShow">
<van-button @click="dateShow = true" block type="info">弹出日期组件</van-button>
<van-calendar get-container="body" v-model="dateShow" />
</van-popup>
</div>
</template>
<script>
import { Popup, Calendar, Button } from 'vant'
export default {
components: {
[Popup.name]: Popup,
[Calendar.name]: Calendar,
[Button.name]: Button,
},
data() {
return {
popupShow: false,
dateShow: false,
}
},
}
</script>
以上代码在每次打开弹出层之后控制台就会报错 Cannot use 'in' operator to search for 'scrollTop' in undefined
,经排查,问题出在日历组件上。
报错原因
这个报错通常是由于在弹出层组件中使用日历组件时,弹出层组件的内容在初始化时还未渲染完成,导致无法找到正确的容器而报错。具体来说,vant
的弹出层组件 <van-popup>
在初始化时可能还未完全显示,而日历组件 <van-calendar>
在初始化时就尝试在弹出层中渲染,此时弹出层的容器可能还未正确创建,导致无法找到正确的容器而报错。这种情况下,日历组件无法正确初始化和渲染,从而导致报错。
解决办法
将 van-calendar
组件 挪到 van-popup
的外层去,例如与 van-calendar
组件同级。
将 <van-calendar>
组件移动到 <van-popup>
外层后,<van-calendar>
组件会在页面初始化时就进行渲染,而不会等待弹出层显示时再渲染。这样可以避免弹出层显示时找不到正确容器而报错的情况。