Vant: PullRefresh 和 List 组件配合使用的问题

[MickeyMouse623]

当 PullRefresh 和 List 组件配合时，页面滚动至第二屏以后，想将 List 往上滚动时却触发了 PullRefresh 组件的 下拉刷新，无法向上滚动
代码如下：

<van-pull-refresh v-model="pullRefresh" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          @load="onLoad">
          <template v-for="(item, index) in list">
            <div class="cell-item" :key="index">
              <div class="cell-thumb">
                <img :src="item.thumb" alt="" class="img-responsive">
              </div>
              <div class="cell-content">
                <div class="cell-name">{{item.title}}</div>
                <div class="cell-line">
                  <span class="icon-tag">
                    <img src="../assets/img/icon-member.png" class="img-responsive">
                  </span>
                  <span class="label-price">&yen;{{$wx.formatMoney(item.price)}}</span>
                </div>
                <div class="cell-line">
                  <span class="label-oldprice">&yen;{{$wx.formatMoney(item.oldPrice)}}</span>
                </div>
                <button class="btn-shopcut" @click="handleAddShopCut(item.id)">加入购物车</button>
              </div>
            </div>
            <div class="whitespace" :key="'w-' + index"></div>
          </template>
          <div class="list-footer" v-if="finished">
            <span class="icon-finished"></span>已经到底了
          </div>
        </van-list>
      </van-pull-refresh>

[LynanBreeze]

这个问题我也有遇到，我是通过监听list滚动高度，当高度大于0时禁用pullRefresh解决的。

[MickeyMouse623]

如何监听list的 scroll 事件，用原生JS监听？

[LynanBreeze]

@MickeyMouse623 我没有用list，不过和list是一样效果的vue-infinite-loading ，用js添加eventListener监听scroll事件获取滚动高度

[chenjiahan]

未复现这个问题

[MickeyMouse623]

  <div class="aclPointsCenter">
    <van-tabs
      v-model="active"
      color="#4a4a4a"
      :lineWidth="28">
      <van-tab title="获取记录">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="obtain.loading"
            :finished="obtain.finished"
            @load="onLoadObtain">
            <div class="obtain-item" v-for="(item, index) in obtain.dataSource" :key="index">
              <div class="obtain-top">
                <div class="obtain-title">{{item.title}}</div>
                <div class="obtain-score">+{{item.score}}分</div>
              </div>
              <div class="obtain-bot">{{item.time}}</div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="兑换记录">内容 2</van-tab>
    </van-tabs>
  </div>

// style
.aclPointsCenter {
  height: 100%;
  overflow: hidden;
  .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    .van-tabs__content {
      flex: 1;
      overflow-y: scroll;
    }
  }
}

当List是 区域滚动 时，在真机中下拉就会触发 PullRefresh 组件的 refresh 方法

[chenjiahan]

试了一下还是没复现

[zhuxianbin]

数据多点呐,跟list没什么关系,只要内容超过设备一屏半以上(滚动条明显不在顶部),往顶部走(也就是手指下滑),就会出现 触发PullRefresh的问题,滚动条无法回到顶部

[zhuxianbin]

我也是全局监听滚动条 !!window.scrollY 如果true,就禁用下拉刷新组件 disabled ,坐等官方填坑

[yunsoon123]

是的 我这边也复现了，跟list没什么关系,只要内容超过设备一屏半以上，往上滑动就会出现 触发PullRefresh的问题,滚动条无法回到顶部

[jisuz]

我也出现这个问题，请问提否提供思路解决

[MickeyMouse623]

年代久远忘了，见谅

[chenjiahan]

楼上复现问题的同学，给个复现的 codesandbox 链接呗？

想要解决问题，总得把问题完整的呈现出来。

[jeanchueng]

是否是因为html，body元素设置了height:100%属性，今天复现了这个问题发现在是window的pageYOffset一直为0，去掉高度后下拉刷新功能正常

[guigui730]

  <div class="aclPointsCenter">
    <van-tabs
      v-model="active"
      color="#4a4a4a"
      :lineWidth="28">
      <van-tab title="获取记录">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="obtain.loading"
            :finished="obtain.finished"
            @load="onLoadObtain">
            <div class="obtain-item" v-for="(item, index) in obtain.dataSource" :key="index">
              <div class="obtain-top">
                <div class="obtain-title">{{item.title}}</div>
                <div class="obtain-score">+{{item.score}}分</div>
              </div>
              <div class="obtain-bot">{{item.time}}</div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="兑换记录">内容 2</van-tab>
    </van-tabs>
  </div>

// style
.aclPointsCenter {
  height: 100%;
  overflow: hidden;
  .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    .van-tabs__content {
      flex: 1;
      overflow-y: scroll;
    }
  }
}

当List是 区域滚动 时，在真机中下拉就会触发 PullRefresh 组件的 refresh 方法

我也遇到了这个问题，解决方法是van-tab 加class
style{
min-height:100vh;
overflow: scroll;
}
.aclPointsCenter 去掉overflow :hidden 应该就可以了