Vue移动端下拉刷新组件的使用教程

.van-pull-refresh {
    height: calc(100vh - 100px) !important; // 此处的 100px 需要根据你的实际情况来处理 , 是页面中不包含列表的高度部分
    overflow: auto !important;
}

<van-pull-refresh
  	v-model="refreshing"	// 表示是否在刷新 , 下拉时自动变为 true ,需要在请求数据结束后手动设置为 false
  	@refresh="onRefresh"	// 下拉刷新触发的方法 , 将分页变为 1 然后请求数据
  	:disabled="pullRefreshDisabled"	// 是否禁用下拉刷新的方法 , 禁用后将无法下拉刷新 , 通过列表滚动高度来控制这个值
>
	<van-list
		 v-model:loading="loading"	// 是否处于加载状态 , 列表滑到最底处时自动变成 true , 变为 true 时不会触发 load 事件方法
		 :finished="finished"	// 是否已经加载完成
		 finished-text="没有更多了" 
		 @load="onLoad" // 加载新数据的方法 , 移动端一般传入新的页数将新数据数组添加到原有数据数组之后
		 @scroll="divScroll"	// 滚动时触发的事件 , 来判断当前滚动的高度是多少
	>
		<div v-for="(item, index) in data" :key="index">
			{{ item }}
		</div>
	</van-list>
</van-pull-refresh>

const pullRefreshDisabled = ref(false)
const divScroll = (e: any) => {
    if (e.target.scrollTop == 0) {
        pullRefreshDisabled.value = false
    } else {
        pullRefreshDisabled.value = true
    }
}