limqsh/quinn-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project init

Browse Source
This commit is contained in:
limqhz
2022-11-11 21:51:57 +08:00
parent e9e20765f2
commit 82dbb842ba
68 changed files with 2771 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/sticky/README.md Normal file
View File

@@ -0,0 +1,56 @@
---
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": "/components/sticky/sticky"
}
```
## 代码演示
将内容包裹在 `Sticky` 组件内
<img src="https://tdesign.gtimg.com/miniprogram/readme/sticky.gif" width="375px" height="50%">
### 基础吸顶
{{ base }}
### 吸顶距离
{{ offset }}
### 指定容器
{{ container }}
## API
### Sticky Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
| ---------------- | -------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
| container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。 | N |
| disabled | Boolean | false | 是否禁用组件 | N |
| external-classes | Array | - | 根结点外部样式。`['t-class']` | N |
| offset-top | Number | 0 | 吸顶时与顶部的距离，单位`px` | N |
| z-index | Number | 99 | 吸顶时的 z-index | N |
### Sticky Events
| 名称 | 参数 | 描述 |
| ------ | --------------------------------------------------- | ------------------------------------------------------ |
| scroll | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 |

3
components/sticky/index.d.ts vendored Normal file
View File

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

3
components/sticky/index.js Normal file
View File

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

3
components/sticky/props.d.ts vendored Normal file
View File

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

21
components/sticky/props.js Normal file
View File

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

30
components/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;
containerStyle: string;
contentStyle: string;
classPrefix: string;
};
ready(): void;
methods: {
onScroll(event?: {
scrollTop: number;
}): void;
setDataAfterDiff(data: {
isFixed: boolean;
height?: number;
transform?: number;
}): void;
getContainerRect(): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
};
}

118
components/sticky/sticky.js Normal file
View File

@@ -0,0 +1,118 @@
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, getRect } from '../mixins/page-scroll';
const { prefix } = config;
const ContainerClass = `.${prefix}-sticky`;
let Sticky = class Sticky extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`];
this.properties = props;
this.behaviors = [
pageScrollMixin(function (event) {
this.onScroll(event);
}),
];
this.observers = {
'offsetTop, disabled, container'() {
this.onScroll();
},
};
this.data = {
prefix,
containerStyle: '',
contentStyle: '',
classPrefix: `.${prefix}-sticky`,
};
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`;
}
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;

4
components/sticky/sticky.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

5
components/sticky/sticky.wxml Normal file
View File

@@ -0,0 +1,5 @@
<view class="{{classPrefix}} {{prefix}}-class" style="z-index:{{ zIndex }};{{ containerStyle }}">
<view class="{{classPrefix}}__content" style="z-index:{{ zIndex }};{{ contentStyle }}">
<slot />
</view>
</view>

33
components/sticky/sticky.wxss Normal file
View File

@@ -0,0 +1,33 @@
.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;
}
.t-sticky__content {
width: 100%;
}

27
components/sticky/type.d.ts vendored Normal file
View File

@@ -0,0 +1,27 @@
export interface TdStickyProps {
container?: {
type: null;
value?: null;
required?: boolean;
};
disabled?: {
type: BooleanConstructor;
value?: boolean;
required?: boolean;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class'];
required?: boolean;
};
offsetTop?: {
type: NumberConstructor;
value?: number;
required?: boolean;
};
zIndex?: {
type: NumberConstructor;
value?: number;
required?: boolean;
};
}

2
components/sticky/type.js Normal file
View File

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