first commit
This commit is contained in:
@@ -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 | -
|
||||
@@ -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 | - | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 | 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 | -
|
||||
112
uni_modules/tdesign-uniapp/components/pull-down-refresh/props.ts
Normal file
112
uni_modules/tdesign-uniapp/components/pull-down-refresh/props.ts
Normal 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,
|
||||
},
|
||||
/** 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 */
|
||||
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: () => ({}),
|
||||
},
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
118
uni_modules/tdesign-uniapp/components/pull-down-refresh/type.ts
Normal file
118
uni_modules/tdesign-uniapp/components/pull-down-refresh/type.ts
Normal 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;
|
||||
/**
|
||||
* 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
|
||||
* @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;
|
||||
}
|
||||
Reference in New Issue
Block a user