first commit

This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions

View File

@@ -0,0 +1,60 @@
:: BASE_DOC ::
## API
### PullDownRefresh Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
disabled | Boolean | false | disabled pull down refresh | N
enable-back-to-top | Boolean | true | \- | N
enable-passive | Boolean | false | \- | N
loading-bar-height | String / Number | 50 | \- | N
loading-props | Object | {} | Typescript`LoadingProps`[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/pull-down-refresh/type.ts) | N
loading-texts | Array | [] | Typescript`string[]` | N
lower-threshold | String / Number | 50 | \- | N
max-bar-height | String / Number | 80 | \- | N
refresh-timeout | Number | 3000 | \- | N
scroll-into-view | String | - | \- | N
show-scrollbar | Boolean | true | \- | N
success-duration | String / Number | 500 | \- | N
upper-threshold | String / Number | 50 | \- | N
using-custom-navbar | Boolean | false | \- | N
value | Boolean | false | `v-model:value` is supported | N
default-value | Boolean | false | uncontrolled property | N
### PullDownRefresh Events
name | params | description
-- | -- | --
change | `(context: { value: boolean })` | \-
dragend | `(context: TouchEvent)` | \-
dragging | `(context: TouchEvent)` | \-
dragstart | `(context: TouchEvent)` | \-
refresh | \- | \-
scrolltolower | \- | \-
timeout | \- | \-
### PullDownRefresh Slots
name | Description
-- | --
\- | \-
header | \-
### PullDownRefresh External Classes
className | Description
-- | --
t-class | \-
t-class-indicator | \-
t-class-loading | \-
t-class-text | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-pull-down-refresh-color | @text-color-placeholder | -

View File

@@ -0,0 +1,83 @@
---
title: PullDownRefresh 下拉刷新
description: 用于快速刷新页面信息,刷新可以是整页刷新也可以是页面的局部刷新。
spline: message
isComponent: true
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TPullDownRefresh from '@tdesign/uniapp/pull-down-refresh/pull-down-refresh.vue';
```
### 顶部下拉刷新
由于组件内无法监听页面滚动,需要由页面获取组件实例,并将页面滚动事件传递到组件。
{{ base }}
> 在使用 pull-down-refresh 组件的页面,建议开启 `disableScroll: true`
## API
### PullDownRefresh Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
disabled | Boolean | false | 是否禁用下拉刷新 | N
enable-back-to-top | Boolean | true | iOS点击顶部状态栏、安卓双击标题栏时滚动条返回顶部只支持竖向。自 2.27.3 版本开始,若非显式设置为 false则在显示尺寸大于屏幕 90% 时自动开启 | N
enable-passive | Boolean | false | 开启 passive 特性,能优化一定的滚动性能 | N
loading-bar-height | String / Number | 50 | 加载中下拉高度,如果值为数字则单位是:'px' | N
loading-props | Object | {} | 加载loading样式。TS 类型:`LoadingProps`[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/pull-down-refresh/type.ts) | N
loading-texts | Array | [] | 提示语,组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型:`string[]` | N
lower-threshold | String / Number | 50 | 距底部/右边多远时,触发 scrolltolower 事件 | N
max-bar-height | String / Number | 80 | 最大下拉高度,如果值为数字则单位是:'px' | N
refresh-timeout | Number | 3000 | 刷新超时时间 | N
scroll-into-view | String | - | 值应为某子元素idid不能以数字开头。设置哪个方向可滚动则在哪个方向滚动到该元素 | N
show-scrollbar | Boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | N
success-duration | String / Number | 500 | 刷新成功提示展示时长,单位 'ms' | N
upper-threshold | String / Number | 50 | 距顶部/左边多远时,触发 scrolltoupper 事件 | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
value | Boolean | false | 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态。支持语法糖 `v-model:value` | N
default-value | Boolean | false | 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态。非受控属性 | N
### PullDownRefresh Events
名称 | 参数 | 描述
-- | -- | --
change | `(context: { value: boolean })` | 下拉或收起时触发,用户手势往下滑动触发下拉状态,手势松开触发收起状态
dragend | `(context: TouchEvent)` | 滑动结束事件
dragging | `(context: TouchEvent)` | 滑动事件
dragstart | `(context: TouchEvent)` | 滑动开始事件
refresh | \- | 结束下拉时触发
scrolltolower | \- | 滚动到页面底部时触发
timeout | \- | 刷新超时触发
### PullDownRefresh Slots
名称 | 描述
-- | --
\- | 默认插槽,自定义内容区域内容
header | 头部
### PullDownRefresh External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-indicator | 指示样式类
t-class-loading | 加载样式类
t-class-text | 文本样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-pull-down-refresh-color | @text-color-placeholder | -

View File

@@ -0,0 +1,112 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
import type { TdPullDownRefreshProps } from './type';
export default {
/** 是否禁用下拉刷新 */
disabled: Boolean,
/** iOS点击顶部状态栏、安卓双击标题栏时滚动条返回顶部只支持竖向。自 2.27.3 版本开始,若非显式设置为 false则在显示尺寸大于屏幕 90% 时自动开启 */
enableBackToTop: {
type: Boolean,
default: true,
},
/** 开启 passive 特性,能优化一定的滚动性能 */
enablePassive: Boolean,
/** 加载中下拉高度,如果值为数字则单位是:'px' */
loadingBarHeight: {
type: [String, Number],
default: 50 as TdPullDownRefreshProps['loadingBarHeight'],
},
/** 加载loading样式 */
loadingProps: {
type: Object,
default: () => ({}),
},
/** 提示语,组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'] */
loadingTexts: {
type: Array,
default: (): TdPullDownRefreshProps['loadingTexts'] => [],
},
/** 距底部/右边多远时,触发 scrolltolower 事件 */
lowerThreshold: {
type: [String, Number],
default: 50 as TdPullDownRefreshProps['lowerThreshold'],
},
/** 最大下拉高度,如果值为数字则单位是:'px' */
maxBarHeight: {
type: [String, Number],
default: 80 as TdPullDownRefreshProps['maxBarHeight'],
},
/** 刷新超时时间 */
refreshTimeout: {
type: Number,
default: 3000,
},
/** 值应为某子元素idid不能以数字开头。设置哪个方向可滚动则在哪个方向滚动到该元素 */
scrollIntoView: {
type: String,
default: '',
},
/** 滚动条显隐控制 (同时开启 enhanced 属性后生效) */
showScrollbar: {
type: Boolean,
default: true,
},
/** 刷新成功提示展示时长,单位 'ms' */
successDuration: {
type: [String, Number],
default: 500 as TdPullDownRefreshProps['successDuration'],
},
/** 距顶部/左边多远时,触发 scrolltoupper 事件 */
upperThreshold: {
type: [String, Number],
default: 50 as TdPullDownRefreshProps['upperThreshold'],
},
/** 是否使用了自定义导航栏 */
usingCustomNavbar: Boolean,
/** 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态 */
value: {
type: Boolean,
default: undefined,
},
/** 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态,非受控属性 */
defaultValue: Boolean,
/** 下拉或收起时触发,用户手势往下滑动触发下拉状态,手势松开触发收起状态 */
onChange: {
type: Function,
default: () => ({}),
},
/** 滑动结束事件 */
onDragend: {
type: Function,
default: () => ({}),
},
/** 滑动事件 */
onDragging: {
type: Function,
default: () => ({}),
},
/** 滑动开始事件 */
onDragstart: {
type: Function,
default: () => ({}),
},
/** 结束下拉时触发 */
onRefresh: {
type: Function,
default: () => ({}),
},
/** 滚动到页面底部时触发 */
onScrolltolower: {
type: Function,
default: () => ({}),
},
/** 刷新超时触发 */
onTimeout: {
type: Function,
default: () => ({}),
},
};

View File

@@ -0,0 +1,29 @@
.t-pull-down-refresh {
overflow: hidden;
height: 100%;
}
.t-pull-down-refresh__track {
position: relative;
}
.t-pull-down-refresh__track--loosing {
transition: transform ease 0.24s;
}
.t-pull-down-refresh__tips {
position: absolute;
color: var(--td-pull-down-refresh-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
font-size: 24rpx;
top: 0;
width: 100%;
transform: translateY(-100%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
}
.t-pull-down-refresh__tips--loosing {
transition: height ease 0.24s;
}
.t-pull-down-refresh__text {
margin: 16rpx 0 0;
}

View File

@@ -0,0 +1,366 @@
<template>
<scroll-view
:style="tools._style([customStyle, 'max-height: calc(100vh - ' + distanceTop + 'px)'])"
:class="classPrefix + ' ' + tClass"
type="list"
:scroll-top="scrollTop"
scroll-y
:enable-back-to-top="enableBackToTop"
:enable-passive="enablePassive"
:lower-threshold="lowerThreshold"
:upper-threshold="upperThreshold"
:scroll-into-view="scrollIntoView"
:show-scrollbar="showScrollbar"
enhanced
scroll-with-animation
:bounces="false"
:throttle="false"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@scroll="onScroll"
@scrolltoupper="onScrollToTop"
@scrolltolower="onScrollToBottom"
>
<slot name="header" />
<view
:class="classPrefix + '__track ' + (classPrefix + '__track--' + (loosing ? 'loosing' : ''))"
:style="barHeight > 0 ? 'transform: translate3d(0, ' + barHeight + 'px, 0);' : ''"
>
<view
:class="classPrefix + '__tips ' + (classPrefix + '__tips--' + (loosing ? 'loosing' : ''))"
:style="'height: ' + tipsHeight + 'px'"
aria-live="polite"
>
<t-loading
v-if="refreshStatus === REFRESH_STATUS_MAP.LOADING"
:delay="loadingProps.delay || 0"
:duration="loadingProps.duration || 800"
:indicator="loadingProps.indicator || true"
:layout="loadingProps.layout || 'horizontal'"
:loading="loadingProps.loading || true"
:pause="loadingProps.pause || false"
:progress="loadingProps.progress || 0"
:reverse="loadingProps.reverse || false"
:size="loadingProps.size || '50rpx'"
:text="loadingProps.text || dataLoadingTexts[refreshStatus]"
:theme="loadingProps.theme || 'circular'"
:t-class-indicator="tClassIndicator"
:t-class="tClassLoading"
/>
<view
v-else-if="refreshStatus > REFRESH_STATUS_MAP.INITIAL"
:class="classPrefix + '__text ' + tClassText"
>
{{ dataLoadingTexts[refreshStatus] }}
</view>
</view>
<slot />
</view>
</scroll-view>
</template>
<script>
import TLoading from '../loading/loading';
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import props from './props';
import { getRect, systemInfo, unitConvert } from '../common/utils';
import tools from '../common/utils.wxs';
import { getObserver } from '../common/wechat';
import { ParentMixin, RELATION_MAP } from '../common/relation';
const name = `${prefix}-pull-down-refresh`;
const defaultLoadingTexts = ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'];
const REFRESH_STATUS_MAP = {
INITIAL: -1,
PULLING: 0,
LOSING: 1,
LOADING: 2,
SUCCESS: 3,
};
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
externalClasses: [
`${prefix}-class`,
`${prefix}-class-loading`,
`${prefix}-class-text`,
`${prefix}-class-indicator`,
],
mixins: [
ParentMixin(RELATION_MAP.BackTop),
],
components: {
TLoading,
},
props: {
...props,
},
emits: [
'scrolltolower',
'scroll',
'change',
'refresh',
'dragstart',
'dragging',
'dragend',
'timeout',
],
data() {
return {
prefix,
classPrefix: name,
distanceTop: 0,
barHeight: 0,
tipsHeight: 0,
refreshStatus: REFRESH_STATUS_MAP.INITIAL,
loosing: false,
enableToRefresh: true,
scrollTop: 0,
_maxBarHeight: 0,
_loadingBarHeight: 0,
pixelRatio: 1,
startPoint: null,
isPulling: false,
maxRefreshAnimateTimeFlag: 0,
closingAnimateTimeFlag: 0,
refreshStatusTimer: null,
tools,
REFRESH_STATUS_MAP,
};
},
computed: {
touchEnable() {
return this.refreshStatus !== REFRESH_STATUS_MAP.LOADING
&& this.refreshStatus !== REFRESH_STATUS_MAP.SUCCESS
&& !this.disabled;
},
},
watch: {
value(val) {
if (!val) {
clearTimeout(this.maxRefreshAnimateTimeFlag);
if (this.refreshStatus > REFRESH_STATUS_MAP.PULLING) {
this.refreshStatus = REFRESH_STATUS_MAP.SUCCESS;
}
clearTimeout(this.successTimer);
this.successTimer = setTimeout(() => {
this.barHeight = 0;
this.refreshStatus = REFRESH_STATUS_MAP.INITIAL;
}, unitConvert(this.successDuration));
} else {
this.doRefresh();
}
},
barHeight(val) {
this.resetTimer();
if (val === 0 && this.refreshStatus !== REFRESH_STATUS_MAP.INITIAL) {
this.refreshStatusTimer = setTimeout(() => {
this.refreshStatus = REFRESH_STATUS_MAP.INITIAL;
}, 240);
}
this.tipsHeight = Math.min(val, this._loadingBarHeight);
},
maxBarHeight(v) {
this._maxBarHeight = unitConvert(v);
},
loadingBarHeight(v) {
this._loadingBarHeight = unitConvert(v);
},
},
mounted() {
const { screenWidth } = systemInfo;
const { loadingTexts, maxBarHeight, loadingBarHeight } = this;
const isCustomLoadingTexts = Array.isArray(loadingTexts) && loadingTexts.length >= 4;
this._maxBarHeight = unitConvert(maxBarHeight);
this._loadingBarHeight = unitConvert(loadingBarHeight);
this.dataLoadingTexts = isCustomLoadingTexts ? loadingTexts : defaultLoadingTexts;
this.pixelRatio = 750 / screenWidth;
this.updateDistanceTop();
},
beforeUnMount() {
clearTimeout(this.maxRefreshAnimateTimeFlag);
clearTimeout(this.closingAnimateTimeFlag);
this.resetTimer();
},
methods: {
updateDistanceTop() {
const update = (top) => {
this.distanceTop = top;
};
getRect(this, `.${name}`).then((rect) => {
if (rect.top) {
update(rect.top);
return;
}
getObserver(this, `.${name}`).then((res) => {
if (res.intersectionRatio > 0) {
update(res.boundingClientRect.top);
}
});
});
},
resetTimer() {
if (this.refreshStatusTimer) {
clearTimeout(this.refreshStatusTimer);
this.refreshStatusTimer = null;
}
},
onScrollToBottom() {
this.$emit('scrolltolower');
},
onScrollToTop() {
this.enableToRefresh = true;
},
onScroll(e) {
const { scrollTop } = e.detail;
this.enableToRefresh = scrollTop === 0;
this.$emit('scroll', { scrollTop });
},
onTouchStart(e) {
if (this.isPulling || !this.enableToRefresh || !this.touchEnable) return;
const { touches } = e;
this.$emit('dragstart', e);
if (touches.length !== 1) return;
const { pageX, pageY } = touches[0];
this.loosing = false;
this.startPoint = { pageX, pageY };
this.isPulling = true;
},
onTouchMove(e) {
if (!this.startPoint || !this.touchEnable) return;
const { touches } = e;
if (touches.length !== 1) return;
const { pageY } = touches[0];
const offset = pageY - this.startPoint.pageY;
if (offset > 0) {
this.setRefreshBarHeight(offset);
}
this.$emit('dragging', e);
},
onTouchEnd(e) {
if (!this.startPoint || this.disabled) return;
const { changedTouches } = e;
if (changedTouches.length !== 1) return;
const { pageY } = changedTouches[0];
const barHeight = pageY - this.startPoint.pageY;
this.startPoint = null; // 清掉起点之后将忽略touchMove、touchEnd事件
this.isPulling = false;
this.loosing = true;
// 松开时高度超过阈值则触发刷新
if (barHeight > this._loadingBarHeight) {
this._trigger('change', { value: true });
this.$emit('refresh');
} else {
this.barHeight = 0;
}
this.$emit('dragend', e);
},
doRefresh() {
if (this.disabled) return;
this.barHeight = this._loadingBarHeight;
this.refreshStatus = REFRESH_STATUS_MAP.LOADING;
this.loosing = true;
this.maxRefreshAnimateTimeFlag = setTimeout(() => {
this.maxRefreshAnimateTimeFlag = null;
if (this.refreshStatus === REFRESH_STATUS_MAP.LOADING) {
// 超时回调
this.$emit('timeout');
this._trigger('change', { value: false });
}
}, this.refreshTimeout);
},
setRefreshBarHeight(value) {
const barHeight = Math.min(value, this._maxBarHeight);
const data = { barHeight };
if (barHeight >= this._loadingBarHeight) {
data.refreshStatus = REFRESH_STATUS_MAP.LOSING;
} else {
data.refreshStatus = REFRESH_STATUS_MAP.PULLING;
}
return new Promise((resolve) => {
Object.keys(data).forEach((key) => {
this[key] = data[key];
});
setTimeout(() => {
resolve(barHeight);
}, 20);
});
},
setScrollTop(scrollTop) {
this.scrollTop = scrollTop;
},
scrollToTop() {
let parsed = false;
// #ifdef APP-PLUS || MP
this.scrollTop = 0;
setTimeout(() => {
this.scrollTop = 0.01;
});
parsed = true;
// #endif
// #ifdef H5
// https://yuanbao.tencent.com/chat/naQivTmsDa/c10ae37f-c66f-4489-ac4e-e72710a3f65a
this.scrollTop = this.scrollTop === 0 ? 0.01 : 0;
parsed = true;
// #endif
if (!parsed) {
this.setScrollTop(0);
}
},
},
});
</script>
<style scoped>
@import './pull-down-refresh.css';
</style>

View File

@@ -0,0 +1,118 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
import type { TdLoadingProps as LoadingProps } from '../loading/type';
export interface TdPullDownRefreshProps {
/**
* 是否禁用下拉刷新
* @default false
*/
disabled?: boolean;
/**
* iOS点击顶部状态栏、安卓双击标题栏时滚动条返回顶部只支持竖向。自 2.27.3 版本开始,若非显式设置为 false则在显示尺寸大于屏幕 90% 时自动开启
* @default true
*/
enableBackToTop?: boolean;
/**
* 开启 passive 特性,能优化一定的滚动性能
* @default false
*/
enablePassive?: boolean;
/**
* 加载中下拉高度,如果值为数字则单位是:'px'
* @default 50
*/
loadingBarHeight?: string | number;
/**
* 加载loading样式
* @default {}
*/
loadingProps?: LoadingProps;
/**
* 提示语,组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']
* @default []
*/
loadingTexts?: string[];
/**
* 距底部/右边多远时,触发 scrolltolower 事件
* @default 50
*/
lowerThreshold?: string | number;
/**
* 最大下拉高度,如果值为数字则单位是:'px'
* @default 80
*/
maxBarHeight?: string | number;
/**
* 刷新超时时间
* @default 3000
*/
refreshTimeout?: number;
/**
* 值应为某子元素idid不能以数字开头。设置哪个方向可滚动则在哪个方向滚动到该元素
* @default ''
*/
scrollIntoView?: string;
/**
* 滚动条显隐控制 (同时开启 enhanced 属性后生效)
* @default true
*/
showScrollbar?: boolean;
/**
* 刷新成功提示展示时长,单位 'ms'
* @default 500
*/
successDuration?: string | number;
/**
* 距顶部/左边多远时,触发 scrolltoupper 事件
* @default 50
*/
upperThreshold?: string | number;
/**
* 是否使用了自定义导航栏
* @default false
*/
usingCustomNavbar?: boolean;
/**
* 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态
* @default false
*/
value?: boolean;
/**
* 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态,非受控属性
* @default false
*/
defaultValue?: boolean;
/**
* 下拉或收起时触发,用户手势往下滑动触发下拉状态,手势松开触发收起状态
*/
onChange?: (context: { value: boolean }) => void;
/**
* 滑动结束事件
*/
onDragend?: (context: TouchEvent) => void;
/**
* 滑动事件
*/
onDragging?: (context: TouchEvent) => void;
/**
* 滑动开始事件
*/
onDragstart?: (context: TouchEvent) => void;
/**
* 结束下拉时触发
*/
onRefresh?: () => void;
/**
* 滚动到页面底部时触发
*/
onScrolltolower?: () => void;
/**
* 刷新超时触发
*/
onTimeout?: () => void;
}