vant:解决下拉刷新和滚动的冲突（手机端）

最新推荐文章于 2026-04-30 07:26:18 发布

原创最新推荐文章于 2026-04-30 07:26:18 发布 · 2.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

功能

当前文章被收录于：

功能

25 篇文章 1 人学习

实现的一些基本的功能

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种解决在前端开发中下拉刷新与滚动冲突的方法，通过调整CSS样式来确保良好的用户体验。

html:

<div class="gzrwClass">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="gzrw_scroll">
        <div
          v-for="(item, index) in dataList"
          :key="index"
        >
        ~~~~~~
        </div>
      </div>
    </van-pull-refresh>
</div>

css:

.gzrw_scroll {
  height: 85vh;
}
/* 解决下拉刷新与滚动冲突的问题 */
.gzrwClass /deep/ .van-pull-refresh {
  height: calc(100vh - 100px) !important;
  overflow: auto !important;
}
.gzrwClass /deep/ .van-list {
  height: auto !important;
}

标签

#css #vue.js