first commit

uni_modules/tdesign-uniapp/components/sticky/README.en-US.md

@@ -0,0 +1,32 @@
+:: BASE_DOC ::
+
+## API
+
+### Sticky Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+container | Function | - | \- | N
+disabled | Boolean | false | \- | N
+offset-top | String / Number | 0 | \- | N
+z-index | Number | 99 | \- | N
+
+### Sticky Events
+
+name | params | description
+-- | -- | --
+scroll | `(context: { scrollTop: number, isFixed: boolean })` | \-
+
+### Sticky Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Sticky External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-

uni_modules/tdesign-uniapp/components/sticky/README.md

@@ -0,0 +1,66 @@
+---
+title: Sticky 吸顶
+description: 用于常驻页面顶部的信息、操作展示。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSticky from '@tdesign/uniapp/sticky/sticky.vue';
+```
+
+## 代码演示
+
+将内容包裹在 `Sticky` 组件内
+
+
+### 基础吸顶
+
+{{ base }}
+
+
+### 吸顶距离
+
+{{ offset }}
+
+### 指定容器
+
+{{ container }}
+
+
+
+## API
+
+### Sticky Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置 | N
+disabled | Boolean | false | 是否禁用组件 | N
+offset-top | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N
+z-index | Number | 99 | 吸顶时的 z-index | N
+
+### Sticky Events
+
+名称 | 参数 | 描述
+-- | -- | --
+scroll | `(context: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
+
+### Sticky Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### Sticky External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类

uni_modules/tdesign-uniapp/components/sticky/props.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdStickyProps } from './type';
+export default {
+  /** 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置 */
+  container: {
+    type: Function,
+  },
+  /** 是否禁用组件 */
+  disabled: Boolean,
+  /** 吸顶时与顶部的距离，单位`px` */
+  offsetTop: {
+    type: [String, Number],
+    default: 0 as TdStickyProps['offsetTop'],
+  },
+  /** 吸顶时的 z-index */
+  zIndex: {
+    type: Number,
+    default: 99,
+  },
+  /** 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 */
+  onScroll: {
+    type: Function,
+    default: () => ({}),
+  },
+};

uni_modules/tdesign-uniapp/components/sticky/sticky.css

@@ -0,0 +1,3 @@
+.t-sticky {
+  position: relative;
+}

uni_modules/tdesign-uniapp/components/sticky/sticky.vue

@@ -0,0 +1,144 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="tools._style(['z-index:' + zIndex, containerStyle, customStyle])"
+  >
+    <view
+      :class="classPrefix + '__content ' + tClassContent"
+      :style="tools._style(['z-index:' + zIndex, contentStyle])"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import pageScrollMixin from '../mixins/page-scroll';
+import { getRect, nextTick } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-sticky`;
+const ContainerClass = `.${name}`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [pageScrollMixin()],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      containerStyle: '',
+      contentStyle: '',
+      tools,
+    };
+  },
+  watch: {
+    offsetTop: 'onScroll',
+    disabled: 'onScroll',
+    container: 'onScroll',
+  },
+  mounted() {
+    this.onScroll();
+  },
+  methods: {
+    onScroll(event) {
+      const { scrollTop } = event || {};
+      const { container, offsetTop, disabled } = this;
+
+      if (disabled) {
+        this.setDataAfterDiff({
+          isFixed: false,
+          transform: 0,
+        });
+        return;
+      }
+
+      this.scrollTop = scrollTop || this.scrollTop;
+
+      if (typeof container === 'function') {
+        Promise.all([getRect(this, ContainerClass), this.getContainerRect()]).then(([root, container]) => {
+          if (!root || !container) return;
+          if (offsetTop + root.height > container.height + container.top) {
+            this.setDataAfterDiff({
+              isFixed: false,
+              transform: container.height - root.height,
+            });
+          } else if (offsetTop >= root.top) {
+            this.setDataAfterDiff({
+              isFixed: true,
+              height: root.height,
+              transform: 0,
+            });
+          } else {
+            this.setDataAfterDiff({ isFixed: false, transform: 0 });
+          }
+        });
+
+        return;
+      }
+
+      getRect(this, ContainerClass).then((root) => {
+        if (!root) return;
+        if (offsetTop >= root.top) {
+          this.setDataAfterDiff({ isFixed: true, height: root.height });
+          this.transform = 0;
+        } else {
+          this.setDataAfterDiff({ isFixed: false });
+        }
+      });
+    },
+
+    setDataAfterDiff(data) {
+      const { offsetTop } = this;
+      const { containerStyle: prevContainerStyle, contentStyle: prevContentStyle } = this;
+      const { isFixed, height, transform } = data;
+      nextTick().then(() => {
+        let containerStyle = '';
+        let contentStyle = '';
+
+        if (isFixed) {
+          containerStyle += `height:${height}px;`;
+          contentStyle += `position:fixed;top:${offsetTop}px;left:0;right:0;`;
+        }
+        if (transform) {
+          const translate = `translate3d(0, ${transform}px, 0)`;
+          contentStyle += `-webkit-transform:${translate};transform:${translate};`;
+        }
+
+        if (prevContainerStyle !== containerStyle || prevContentStyle !== contentStyle) {
+          this.containerStyle = containerStyle;
+          this.contentStyle = contentStyle;
+        }
+
+        this.$emit('scroll', {
+          scrollTop: this.scrollTop,
+          isFixed,
+        });
+      });
+    },
+
+    getContainerRect() {
+      const nodesRef = this.container();
+      return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec());
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './sticky.css';
+</style>

uni_modules/tdesign-uniapp/components/sticky/type.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdStickyProps {
+  /**
+   * 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置
+   */
+  container?: Function;
+  /**
+   * 是否禁用组件
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 吸顶时与顶部的距离，单位`px`
+   * @default 0
+   */
+  offsetTop?: string | number;
+  /**
+   * 吸顶时的 z-index
+   * @default 99
+   */
+  zIndex?: number;
+  /**
+   * 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
+   */
+  onScroll?: (context: { scrollTop: number; isFixed: boolean }) => void;
+}