@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/pull-down-refresh/README.en-US.md

@@ -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 | -

package/dist/pull-down-refresh/README.md

@@ -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 | -

package/dist/pull-down-refresh/props.ts

@@ -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: () => ({}),
+  },
+};

package/dist/pull-down-refresh/pull-down-refresh.css

@@ -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;
+}

package/dist/pull-down-refresh/pull-down-refresh.vue

@@ -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>