New Huajishe Check ChaoXing

This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions

View File

@@ -0,0 +1,54 @@
:: BASE_DOC ::
## API
### PullDownRefresh Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)used to set style on virtual component | N
disabled | Boolean | false | disabled pull down refresh | N
enable-back-to-top | Boolean | true | `1.1.5` | N
enable-passive | Boolean | false | `1.1.5` | N
header | Slot | - | `1.2.10`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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/src/pull-down-refresh/type.ts) | N
loading-texts | Array | [] | Typescript`string[]` | N
lower-threshold | String / Number | 50 | `1.1.5` | N
max-bar-height | String / Number | 80 | \- | N
refresh-timeout | Number | 3000 | \- | N
scroll-into-view | String | - | `1.1.5` | N
show-scrollbar | Boolean | true | \- | N
upper-threshold | String / Number | 50 | `1.1.5` | N
using-custom-navbar | Boolean | false | \- | N
value | Boolean | false | \- | N
default-value | Boolean | undefined | uncontrolled property | N
### PullDownRefresh Events
name | params | description
-- | -- | --
change | `(value: boolean)` | \-
dragend | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
dragging | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
refresh | \- | \-
scrolltolower | \- | \-
timeout | \- | \-
### 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 | @font-gray-3 | -

View File

@@ -0,0 +1,87 @@
---
title: PullDownRefresh 下拉刷新
description: 用于快速刷新页面信息,刷新可以是整页刷新也可以是页面的局部刷新。
spline: message
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-81%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-81%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/HH8v1imF7iSf" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后依次执行npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 顶部下拉刷新
由于组件内无法监听页面滚动,需要由页面获取组件实例,并将页面滚动事件传递到组件。
{{ base }}
> 在使用 pull-down-refresh 组件的页面,建议开启 `disableScroll: true`
## API
### PullDownRefresh Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
disabled | Boolean | false | 是否禁用下拉刷新 | N
enable-back-to-top | Boolean | true | `1.1.5`。iOS点击顶部状态栏、安卓双击标题栏时滚动条返回顶部只支持竖向。自 2.27.3 版本开始,若非显式设置为 false则在显示尺寸大于屏幕 90% 时自动开启 | N
enable-passive | Boolean | false | `1.1.5`。开启 passive 特性,能优化一定的滚动性能 | N
header | Slot | - | `1.2.10`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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/src/pull-down-refresh/type.ts) | N
loading-texts | Array | [] | 提示语,组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型:`string[]` | N
lower-threshold | String / Number | 50 | `1.1.5`。距底部/右边多远时,触发 scrolltolower 事件 | N
max-bar-height | String / Number | 80 | 最大下拉高度,如果值为数字则单位是:'px' | N
refresh-timeout | Number | 3000 | 刷新超时时间 | N
scroll-into-view | String | - | `1.1.5`。值应为某子元素idid不能以数字开头。设置哪个方向可滚动则在哪个方向滚动到该元素 | N
show-scrollbar | Boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | N
upper-threshold | String / Number | 50 | `1.1.5`。距顶部/左边多远时,触发 scrolltoupper 事件 | N
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
value | Boolean | false | 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态 | N
default-value | Boolean | undefined | 组件状态,值为 `true` 表示下拉状态,值为 `false` 表示收起状态。非受控属性 | N
### PullDownRefresh Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: boolean)` | 下拉或收起时触发,用户手势往下滑动触发下拉状态,手势松开触发收起状态
dragend | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动结束事件
dragging | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动事件
dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动开始事件
refresh | \- | 结束下拉时触发
scrolltolower | \- | 滚动到页面底部时触发
timeout | \- | 刷新超时触发
### PullDownRefresh External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-indicator | 指示样式类
t-class-loading | 加载样式类
t-class-text | 文本样式类
### CSS Variables
组件提供了下列 CSS 变量,可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-pull-down-refresh-color | @font-gray-3 | -

View File

@@ -0,0 +1,3 @@
import { TdPullDownRefreshProps } from './type';
declare const props: TdPullDownRefreshProps;
export default props;

View File

@@ -0,0 +1,65 @@
const props = {
disabled: {
type: Boolean,
value: false,
},
enableBackToTop: {
type: Boolean,
value: true,
},
enablePassive: {
type: Boolean,
value: false,
},
externalClasses: {
type: Array,
},
loadingBarHeight: {
type: null,
value: 50,
},
loadingProps: {
type: Object,
},
loadingTexts: {
type: Array,
value: [],
},
lowerThreshold: {
type: null,
value: 50,
},
maxBarHeight: {
type: null,
value: 80,
},
refreshTimeout: {
type: Number,
value: 3000,
},
scrollIntoView: {
type: String,
value: '',
},
showScrollbar: {
type: Boolean,
value: true,
},
upperThreshold: {
type: null,
value: 50,
},
usingCustomNavbar: {
type: Boolean,
value: false,
},
value: {
type: Boolean,
value: null,
},
defaultValue: {
type: Boolean,
value: false,
},
};
export default props;

View File

@@ -0,0 +1,58 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
export default class PullDownRefresh extends SuperComponent {
pixelRatio: number;
startPoint: {
pageX: number;
pageY: number;
} | null;
isPulling: boolean;
maxRefreshAnimateTimeFlag: number;
closingAnimateTimeFlag: number;
refreshStatusTimer: any;
externalClasses: string[];
options: {
multipleSlots: boolean;
pureDataPattern: RegExp;
};
relations: RelationsOptions;
properties: import("./type").TdPullDownRefreshProps;
behaviors: string[];
data: {
prefix: string;
classPrefix: string;
barHeight: number;
tipsHeight: number;
refreshStatus: number;
loosing: boolean;
enableToRefresh: boolean;
scrollTop: number;
_maxBarHeight: number;
_loadingBarHeight: number;
};
lifetimes: {
attached(): void;
detached(): void;
};
observers: {
value(val: any): void;
barHeight(val: any): void;
maxBarHeight(v: any): void;
loadingBarHeight(v: any): void;
};
methods: {
resetTimer(): void;
onScrollToBottom(): void;
onScrollToTop(): void;
onScroll(e: any): void;
onTouchStart(e: WechatMiniprogram.Component.TrivialInstance): void;
onTouchMove(e: WechatMiniprogram.Component.TrivialInstance): void;
onTouchEnd(e: WechatMiniprogram.Component.TrivialInstance): void;
onDragStart(e: WechatMiniprogram.ScrollViewDragStart): void;
onDragging(e: WechatMiniprogram.ScrollViewDragging): void;
onDragEnd(e: WechatMiniprogram.ScrollViewDragEnd): void;
doRefresh(): void;
setRefreshBarHeight(value: number): Promise<unknown>;
setScrollTop(scrollTop: number): void;
scrollToTop(): void;
};
}

View File

@@ -0,0 +1,214 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
import { unitConvert, systemInfo } from '../common/utils';
import useCustomNavbar from '../mixins/using-custom-navbar';
const { prefix } = config;
const name = `${prefix}-pull-down-refresh`;
let PullDownRefresh = class PullDownRefresh extends SuperComponent {
constructor() {
super(...arguments);
this.pixelRatio = 1;
this.startPoint = null;
this.isPulling = false;
this.maxRefreshAnimateTimeFlag = 0;
this.closingAnimateTimeFlag = 0;
this.refreshStatusTimer = null;
this.externalClasses = [`${prefix}-class`, `${prefix}-class-loading`, `${prefix}-class-text`, `${prefix}-class-indicator`];
this.options = {
multipleSlots: true,
pureDataPattern: /^_/,
};
this.relations = {
'../back-top/back-top': {
type: 'descendant',
},
};
this.properties = props;
this.behaviors = [useCustomNavbar];
this.data = {
prefix,
classPrefix: name,
barHeight: 0,
tipsHeight: 0,
refreshStatus: -1,
loosing: false,
enableToRefresh: true,
scrollTop: 0,
_maxBarHeight: 0,
_loadingBarHeight: 0,
};
this.lifetimes = {
attached() {
const { screenWidth } = systemInfo;
const { loadingTexts, maxBarHeight, loadingBarHeight } = this.properties;
this.setData({
_maxBarHeight: unitConvert(maxBarHeight),
_loadingBarHeight: unitConvert(loadingBarHeight),
loadingTexts: Array.isArray(loadingTexts) && loadingTexts.length >= 4
? loadingTexts
: ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'],
});
this.pixelRatio = 750 / screenWidth;
},
detached() {
clearTimeout(this.maxRefreshAnimateTimeFlag);
clearTimeout(this.closingAnimateTimeFlag);
this.resetTimer();
},
};
this.observers = {
value(val) {
if (!val) {
clearTimeout(this.maxRefreshAnimateTimeFlag);
if (this.data.refreshStatus > 0) {
this.setData({
refreshStatus: 3,
});
}
this.setData({ barHeight: 0 });
}
else {
this.doRefresh();
}
},
barHeight(val) {
this.resetTimer();
if (val === 0 && this.data.refreshStatus !== -1) {
this.refreshStatusTimer = setTimeout(() => {
this.setData({ refreshStatus: -1 });
}, 240);
}
this.setData({ tipsHeight: Math.min(val, this.data._loadingBarHeight) });
},
maxBarHeight(v) {
this.setData({ _maxBarHeight: unitConvert(v) });
},
loadingBarHeight(v) {
this.setData({ _loadingBarHeight: unitConvert(v) });
},
};
this.methods = {
resetTimer() {
if (this.refreshStatusTimer) {
clearTimeout(this.refreshStatusTimer);
this.refreshStatusTimer = null;
}
},
onScrollToBottom() {
this.triggerEvent('scrolltolower');
},
onScrollToTop() {
this.setData({
enableToRefresh: true,
});
},
onScroll(e) {
const { scrollTop } = e.detail;
this.setData({
enableToRefresh: scrollTop === 0,
});
this.triggerEvent('scroll', { scrollTop });
},
onTouchStart(e) {
if (this.isPulling || !this.data.enableToRefresh || this.properties.disabled)
return;
const { touches } = e;
if (touches.length !== 1)
return;
const { pageX, pageY } = touches[0];
this.setData({ loosing: false });
this.startPoint = { pageX, pageY };
this.isPulling = true;
},
onTouchMove(e) {
if (!this.startPoint || this.properties.disabled)
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);
}
},
onTouchEnd(e) {
if (!this.startPoint || this.properties.disabled)
return;
const { changedTouches } = e;
if (changedTouches.length !== 1)
return;
const { pageY } = changedTouches[0];
const barHeight = pageY - this.startPoint.pageY;
this.startPoint = null;
this.isPulling = false;
this.setData({ loosing: true });
if (barHeight > this.data._loadingBarHeight) {
this._trigger('change', { value: true });
this.triggerEvent('refresh');
}
else {
this.setData({ barHeight: 0 });
}
},
onDragStart(e) {
const { scrollTop, scrollLeft } = e.detail;
this.triggerEvent('dragstart', { scrollTop, scrollLeft });
},
onDragging(e) {
const { scrollTop, scrollLeft } = e.detail;
this.triggerEvent('dragging', { scrollTop, scrollLeft });
},
onDragEnd(e) {
const { scrollTop, scrollLeft } = e.detail;
this.triggerEvent('dragend', { scrollTop, scrollLeft });
},
doRefresh() {
if (this.properties.disabled)
return;
this.setData({
barHeight: this.data._loadingBarHeight,
refreshStatus: 2,
loosing: true,
});
this.maxRefreshAnimateTimeFlag = setTimeout(() => {
this.maxRefreshAnimateTimeFlag = null;
if (this.data.refreshStatus === 2) {
this.triggerEvent('timeout');
this._trigger('change', { value: false });
}
}, this.properties.refreshTimeout);
},
setRefreshBarHeight(value) {
const barHeight = Math.min(value, this.data._maxBarHeight);
const data = { barHeight };
if (barHeight >= this.data._loadingBarHeight) {
data.refreshStatus = 1;
}
else {
data.refreshStatus = 0;
}
return new Promise((resolve) => {
this.setData(data, () => resolve(barHeight));
});
},
setScrollTop(scrollTop) {
this.setData({ scrollTop });
},
scrollToTop() {
this.setScrollTop(0);
},
};
}
};
PullDownRefresh = __decorate([
wxComponent()
], PullDownRefresh);
export default PullDownRefresh;

View File

@@ -0,0 +1,7 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-loading": "../loading/loading"
}
}

View File

@@ -0,0 +1,61 @@
<wxs src="../common/utils.wxs" module="_" />
<scroll-view
style="{{_._style([style, customStyle, 'max-height: calc(100vh - ' + distanceTop + 'px)'])}}"
class="{{classPrefix}} class {{prefix}}-class"
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}}"
bind:touchstart="onTouchStart"
bind:touchmove="onTouchMove"
bind:touchend="onTouchEnd"
bind:scroll="onScroll"
binddragstart="onDragStart"
binddragging="onDragging"
binddragend="onDragEnd"
bindscrolltoupper="onScrollToTop"
bindscrolltolower="onScrollToBottom"
throttle="{{false}}"
>
<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
wx:if="{{refreshStatus === 2}}"
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 || loadingTexts[refreshStatus]}}"
theme="{{loadingProps.theme || 'circular'}}"
t-class-indicator="{{prefix}}-class-indicator"
/>
<view wx:elif="{{refreshStatus >= 0}}" class="{{classPrefix}}__text {{prefix}}-class-text"
>{{loadingTexts[refreshStatus]}}</view
>
</view>
<slot />
</view>
</scroll-view>

View File

@@ -0,0 +1,56 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.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,67 @@
import { LoadingProps } from '../loading/index';
export interface TdPullDownRefreshProps {
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
enableBackToTop?: {
type: BooleanConstructor;
value?: boolean;
};
enablePassive?: {
type: BooleanConstructor;
value?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-loading', 't-class-text', 't-class-indicator'];
};
loadingBarHeight?: {
type: null;
value?: string | number;
};
loadingProps?: {
type: ObjectConstructor;
value?: LoadingProps;
};
loadingTexts?: {
type: ArrayConstructor;
value?: string[];
};
lowerThreshold?: {
type: null;
value?: string | number;
};
maxBarHeight?: {
type: null;
value?: string | number;
};
refreshTimeout?: {
type: NumberConstructor;
value?: number;
};
scrollIntoView?: {
type: StringConstructor;
value?: string;
};
showScrollbar?: {
type: BooleanConstructor;
value?: boolean;
};
upperThreshold?: {
type: null;
value?: string | number;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
value?: {
type: BooleanConstructor;
value?: boolean;
};
defaultValue?: {
type: BooleanConstructor;
value?: boolean;
};
}