Vant下拉刷新与区域滚动冲突是一个常见的问题,它可能会导致用户体验受到影响。
Vant下拉刷新是一种常用的用户界面元素,它可以让用户在浏览内容时,通过向下滑动来刷新内容。而区域滚动是一种常用的交互方式,它可以让用户在浏览内容时,通过向上或向下滑动来浏览不同的内容。
当 Vant 下拉刷新和区域滚动同时存在时,就会出现冲突。因为 Vant 下拉刷新会阻止区域滚动的行为,而区域滚动也会阻止 Vant 下拉刷新的行为。这样就会造成用户体验受到影响;例如:当用户想要浏览不同的内容时,他们可能会遇到 Vant 下拉刷新阻止了他们的行为。
要解决 Vant 下拉刷新和区域滚动之间的冲突问题,最好的方法是使用
better-scroll来代理 Vant 的 touch 交互行为。Better-scroll 可以根据不同情况来处理 touch 交互行为;例如:当 better-scroll 发现 touch 行为是一直往上/往左/往右/往左/往右 时(即识别出是一直在上/左/右 方向上运动时 ) ;better-scroll 就会阻止 Vant 的 touch 行为并把 touch 行为委托给 better-scroll 来处理。
总之;Vant 中存在着一些常见的问题——Vant 中存在着一些常见的问题——Vant 中存在着一些常见的问题——Vant 中存在着一些常见的问题——Vant 中存在着一些常见的问题——Vant 中存在着一些常见的问题——其中之一就是 Vant 中存
用于提供下拉刷新的交互操作。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import { PullRefresh } from "vant";
const app = createApp();
app.use(PullRefresh);
下拉刷新时会触发 refresh
事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-model
设置为 false
,表示加载完成。
<van-pull-refresh v-model="loading" @refresh="onRefresh">
<p>刷新次数: {{ count }}</p>
</van-pull-refresh>
import { ref } from "vue";
import { showToast } from "vant";
export default {
setup() {
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
setTimeout(() => {
showToast("刷新成功");
loading.value = false;
count.value++;
}, 1000);
};
return {
count,
loading,
onRefresh,
};
},
};
通过 success-text
可以设置刷新成功后的顶部提示文案。
<van-pull-refresh
v-model="isLoading"
success-text="刷新成功"
@refresh="onRefresh"
>
<p>刷新次数: {{ count }}</p>
</van-pull-refresh>
通过插槽可以自定义下拉刷新过程中的提示内容。
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
<!-- 下拉提示,通过 scale 实现一个缩放效果 -->
<template #pulling="props">
<img
class="doge"
src="https://img.mdwl.vip/upload11/2303/131629400.png" rel="external nofollow" rel="external nofollow"
:style="{ transform: `scale(${props.distance / 80})` }"
/>
</template>
<!-- 释放提示 -->
<template #loosing>
<img
class="doge"
src="https://img.mdwl.vip/upload11/2303/131629400.png" rel="external nofollow" rel="external nofollow"
/>
</template>
<!-- 加载提示 -->
<template #loading>
<img
class="doge"
src="https://img.mdwl.vip/upload11/2303/131629600.jpeg" rel="external nofollow"
/>
</template>
<p>刷新次数: {{ count }}</p>
</van-pull-refresh>
<style>
.doge {
width: 140px;
height: 72px;
margin-top: 8px;
border-radius: 4px;
}
</style>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 是否处于加载中状态 | boolean | - |
pulling-text | 下拉过程提示文案 | string | 下拉即可刷新...
|
loosing-text | 释放过程提示文案 | string | 释放即可刷新...
|
loading-text | 加载过程提示文案 | string | 加载中...
|
success-text | 刷新成功提示文案 | string | - |
success-duration | 刷新成功提示展示时长(ms) | number | string | 500
|
animation-duration | 动画时长 | number | string | 300
|
head-height | 顶部内容高度 | number | string | 50
|
pull-distance v3.0.8
|
触发下拉刷新的距离 | number | string | 与 head-height 一致 |
disabled | 是否禁用下拉刷新 | boolean | false
|
事件名 | 说明 | 回调参数 |
---|---|---|
refresh | 下拉刷新时触发 | - |
change v3.5.1
|
拖动时或状态改变时触发 | { status: string, distance: number } |
名称 | 说明 | 参数 |
---|---|---|
default | 自定义内容 | - |
normal | 非下拉状态时顶部内容 | - |
pulling | 下拉过程中顶部内容 | { distance: number } |
loosing | 释放过程中顶部内容 | { distance: number } |
loading | 加载过程中顶部内容 | { distance: number } |
success | 刷新成功提示内容 | - |
组件导出以下类型定义:
import type { PullRefreshProps } from "vant";
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-pull-refresh-head-height | 50px | - |
--van-pull-refresh-head-font-size | var(--van-font-size-md) | - |
--van-pull-refresh-head-text-color | var(--van-text-color-2) | - |
--van-pull-refresh-loading-icon-size | 16px | - |
默认情况下,下拉区域的高度是和内容高度保持一致的,如果需要让下拉区域始终为全屏,可以给 PullRefresh 设置一个与屏幕大小相等的最小高度:
<van-pull-refresh style="min-height: 100vh;" />
PullRefresh 的触发条件是「父级滚动元素的滚动条在顶部位置」。
window
,则要求 window.pageYOffset === 0
。Element
,则要求 Element.scrollTop === 0
。参见桌面端适配。
介绍省市区三级联动选择,通常与弹出层组件配合使用。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。im...