vue中使用vant中PullRefresh 下拉刷新踩坑-526互联

问题

PullRefresh 的内容未填满屏幕时，只有一部分区域可以下拉：

<template>
  <div class="appCon">
    <van-pull-refresh
      class="pageRefresh"
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <p>内容</p>
    </van-pull-refresh>
  </div>
</template>

解决

我们需要给 .van-pull-refresh__track 一个高度就可以了，代码如下

<style lang="scss" scoped>
.appCon {
  width: 100%;
  height: 100vh;
}

:deep(.pageRefresh) .van-pull-refresh__track {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>

注意

在修改css样式时，出现了一个错误，一开始使用的是以下代码来修改 .van-pull-refresh__track 的样式，编译时会出现报错。

错误代码

/deep/ .pageRefresh .van-pull-refresh__track {
  xxx...
}

原因：>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/,因此报错。
之后改为了

::v-deep .pageRefresh .van-pull-refresh__track {
  xxx...
}

然后编译器报了提示如下
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

之后修改为以下即可。
正确代码

:deep(.pageRefresh) .van-pull-refresh__track {
  xxx...
}