e2hang/HuajisheTools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

New Huajishe Check ChaoXing

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

26
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/README.en-US.md Normal file
View File

@@ -0,0 +1,26 @@
:: BASE_DOC ::
## API
### Sticky 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
container | Function | - | \- | N
disabled | Boolean | false | \- | N
offset-top | String / Number | 0 | \- | N
z-index | Number | 99 | \- | N
### Sticky Events
name | params | description
-- | -- | --
scroll | `(detail: { scrollTop: number, isFixed: boolean })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
### Sticky External Classes
className | Description
-- | --
t-class | \-
t-class-content | \-

70
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/README.md Normal file
View File

@@ -0,0 +1,70 @@
---
title: Sticky 吸顶
description: 用于常驻页面顶部的信息、操作展示。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-84%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-79%25-red" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-sticky": "tdesign-miniprogram/sticky/sticky"
}
```
## 代码演示
将内容包裹在 `Sticky` 组件内
<img src="https://tdesign.gtimg.com/miniprogram/readme/sticky.gif" width="375px" height="50%">
<a href="https://developers.weixin.qq.com/s/mJ7HTiml7NSM" 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 }}
### 吸顶距离
{{ offset }}
### 指定容器
{{ container }}
## API
### Sticky Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
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 | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)
### Sticky External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-content | 内容样式类

3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/index.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
export * from './props';
export * from './type';
export * from './sticky';

3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/index.js Normal file
View File

@@ -0,0 +1,3 @@
export * from './props';
export * from './type';
export * from './sticky';

3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/props.d.ts vendored Normal file
View File

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

18
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/props.js Normal file
View File

@@ -0,0 +1,18 @@
const props = {
container: {
type: null,
},
disabled: {
type: Boolean,
value: false,
},
offsetTop: {
type: null,
value: 0,
},
zIndex: {
type: Number,
value: 99,
},
};
export default props;

30
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/sticky.d.ts vendored Normal file
View File

@@ -0,0 +1,30 @@
import { SuperComponent } from '../common/src/index';
import type { TdStickyProps } from './type';
export interface StickyProps extends TdStickyProps {
}
export default class Sticky extends SuperComponent {
externalClasses: string[];
properties: TdStickyProps;
behaviors: string[];
observers: {
'offsetTop, disabled, container'(): void;
};
data: {
prefix: string;
classPrefix: string;
containerStyle: string;
contentStyle: string;
};
ready(): void;
methods: {
onScroll(event?: {
scrollTop: number;
}): void;
setDataAfterDiff(data: {
isFixed: boolean;
height?: number;
transform?: number;
}): void;
getContainerRect(): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
};
}

116
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/sticky.js Normal file
View File

@@ -0,0 +1,116 @@
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 props from './props';
import config from '../common/config';
import pageScrollMixin from '../mixins/page-scroll';
import { getRect } from '../common/utils';
const { prefix } = config;
const name = `${prefix}-sticky`;
const ContainerClass = `.${name}`;
let Sticky = class Sticky extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
this.properties = props;
this.behaviors = [pageScrollMixin()];
this.observers = {
'offsetTop, disabled, container'() {
this.onScroll();
},
};
this.data = {
prefix,
classPrefix: name,
containerStyle: '',
contentStyle: '',
};
this.methods = {
onScroll(event) {
const { scrollTop } = event || {};
const { container, offsetTop, disabled } = this.properties;
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.properties;
const { containerStyle: prevContainerStyle, contentStyle: prevContentStyle } = this.data;
const { isFixed, height, transform } = data;
wx.nextTick(() => {
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.setData({ containerStyle, contentStyle });
}
this.triggerEvent('scroll', {
scrollTop: this.scrollTop,
isFixed,
});
});
},
getContainerRect() {
const nodesRef = this.properties.container();
return new Promise((resolve) => nodesRef.boundingClientRect(resolve).exec());
},
};
}
ready() {
this.onScroll();
}
};
Sticky = __decorate([
wxComponent()
], Sticky);
export default Sticky;

5
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/sticky.json Normal file
View File

@@ -0,0 +1,5 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}

13
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/sticky.wxml Normal file
View File

@@ -0,0 +1,13 @@
<wxs src="../common/utils.wxs" module="_" />
<view
class="{{classPrefix}} class {{prefix}}-class"
style="{{_._style(['z-index:' + zIndex, containerStyle, style, customStyle])}}"
>
<view
class="{{classPrefix}}__content {{prefix}}-class-content"
style="{{_._style(['z-index:' + zIndex, contentStyle]) }}"
>
<slot />
</view>
</view>

30
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/sticky.wxss Normal file
View File

@@ -0,0 +1,30 @@
.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-sticky {
position: relative;
}

18
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/type.d.ts vendored Normal file
View File

@@ -0,0 +1,18 @@
export interface TdStickyProps {
container?: {
type: undefined;
value?: null;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
offsetTop?: {
type: null;
value?: string | number;
};
zIndex?: {
type: NumberConstructor;
value?: number;
};
}

1
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/sticky/type.js Normal file
View File

@@ -0,0 +1 @@
export {};