van-pull-refresh下拉刷新与局部滚动条冲突

最新推荐文章于 2024-09-25 16:11:03 发布

Julia_0502

最新推荐文章于 2024-09-25 16:11:03 发布

阅读量3.4k

点赞数 3

分类专栏： vant 移动端 vue 文章标签： javascript vue.js 前端框架

本文链接：https://blog.csdn.net/Julia_0502/article/details/124588312

版权

vue 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

移动端

9 篇文章 0 订阅

订阅专栏

vant

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中处理局部滚动条与下拉刷新的冲突。通过监听touchmove和touchend事件，以及使用van-pull-refresh组件的disabled属性，可以在滚动条滑动时禁用下拉刷新功能。当滚动高度回到0时，重新启用下拉刷新。示例代码展示了具体的实现方式。

摘要由CSDN通过智能技术生成

问题描述

局部滚动条往下滑动时触发下拉刷新

解决方案：

提示：这里填写该问题的具体解决方案：
van-pull-refresh 有 disabled 属性，可以控制是否禁用下拉刷新，通过监听touchmove和touchend事件获取局部滚动高度scrollTop，然后监听滚动高度scrollTop，滚动高度大于0时将van-pull-refresh 的 disabled 属性设置为true，禁用下拉刷新，当滚动高度scrollTop回到0的时候再将 disabled 属性设置为false.

<template>
        <van-pull-refresh
          v-model="refreshing"
          :disabled="isRefreshDisable"
          @refresh="onRefresh"
        >
          <van-list
            v-if="worlOrderList.length >= 0"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="(item, index) in worlOrderList" :key="index">
              {{ item.name }}
            </div>
          </van-list>
          <div v-else class="no-data">
            暂无数据
          </div>
        </van-pull-refresh>
      </template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  components: {
  },
  data() {
    return {
      //   列表
      worlOrderList: [
        { name: 111 },
        { name: 222 },
        { name: 333 },
        { name: 444 }
      ],
      refreshing: false,
      loading: false,
      finished: false,
      total: 0,
      queryList: { current: 1, size: 10 },
      // 滚动与下拉冲突
      scrollTop: 0,
      isRefreshDisable: false
    }
  },
  watch: {
    scrollTop(newval) {
      if (newval > 0) {
        this.isRefreshDisable = true
      } else {
        this.isRefreshDisable = false
      }
    }
  },
  created() {},
  mounted() {
    // 解决滚动条与下拉的冲突
    this.$nextTick(() => {
      const vantList = document.querySelector('.van-list')
      this.resolveConflict(vantList)
    })
  },
  methods: {
    /**
     * @description: 下拉刷新和滚动事件冲突
     * @param {*}
     * @return {*}
     */
    resolveConflict(val) {
      const vantList = val
      vantList.addEventListener('touchmove', () => {
        this.scrollTop = vantList.scrollTop
      })
      vantList.addEventListener('touchend', () => {
        this.scrollTop = vantList.scrollTop
      })
    },
  }
}
</script>