vant4的van-pull-refresh里的列表不在顶部时下拉也会触发刷新的问题

搞个锤子哟2025-10-22 18:29

官方的案例给人误导

html 复制代码

<van-pull-refresh v-model="loading" @refresh="onRefresh"> 
<p>刷新次数: {{ count }}</p> 
</van-pull-refresh>

这种结构，不管里面列表会不会滚动，只要下拉一定会触发下拉刷新

文档尾部给的说明

PullRefresh 的触发条件是？

PullRefresh 的触发条件是「父级滚动元素的滚动条在顶部位置」。

如果最近一个可滚动的父级元素是 window，则要求 window.pageYOffset === 0。
如果最近一个可滚动的父级元素是 Element，则要求 Element.scrollTop === 0。

基于此的改造方案

van-pull-refresh高度不控制，由内部列表撑开。（可以设置最小高度为列表容器高度）
van-pull-refresh外部负责控制滚动

html 复制代码

<div class="list-container" >
     <van-pull-refresh
       v-model="loading"
       style="min-height: 100%"
       @refresh="getAccountList"
     >
       <div
         class="account-item"
         v-for="account in accountList"
         :key="account.id"
       >
         <el-avatar
           :size="25"
           :src="account.imgUrl"
         >
           <img src="@/assets/avatar.png" />
         </el-avatar>
         <div class="account-name">{{ account.name }}</div>
       </div>
     </van-pull-refresh>
</div>
<style>
   .list-container {
      height: 100%;
      overflow-y: auto;
      .account-item {
        display: flex;
        align-items: center;
        column-gap: 10px;
        + .account-item {
          margin-top: 15px;
        }
        .account-name {
          word-break: break-all;
        }
      }
    }
</style>

常见的复杂的改造方案

给van-pull-refresh增加disabled属性
van-pull-refresh里面包裹的滚动列表增加scroll监听，滚动到顶部之前，disabled一直为true