vant框架里面的组件popup自带缓存

vant框架里面vue2版本的里面有一个组件popup弹出层 这个popup好像自带了一个keep-alive一样 他会记录上一次关闭的时候他的组件的滚动条高度 然后下一次打开的时候不是页面最顶部,重新给里面的内容赋值都不行,不知道怎么解决了

您好,根据您所述,似乎是因为popup组件默认会缓存滚动条的位置,导致在下次打开时滚动条位置不在页面顶部。

如果您希望每次打开popup组件时都将滚动条置于页面顶部,可以通过在打开popup组件时设置resetScroll选项来实现。在打开popup组件时,将resetScroll选项设置为true即可:

<template>
  <div>
    <van-button type="primary" @click="showPopup = true">打开popup</van-button>
    <van-popup v-model="showPopup" :reset-scroll="true">
      <div>popup内容</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    }
  }
}
</script>


这样,每次打开popup组件时,弹出层中的滚动条都会被重置到页面顶部。

如果您希望禁用popup组件的缓存滚动条位置功能,可以将lazyRender选项设置为false。但是需要注意,禁用这个功能可能会影响性能,因为每次打开popup组件时都会重新渲染弹出层中的内容。

<template>
  <div>
    <van-button type="primary" @click="showPopup = true">打开popup</van-button>
    <van-popup v-model="showPopup" :lazy-render="false">
      <div>popup内容</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    }
  }
}
</script>


希望这些信息能够对您有所帮助。

img

lazy-render 设置false 试试