bug fix and performance improvements
This commit is contained in:
quantulr
@ -0,0 +1,19 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Sticky Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
container | Function | - | \- | N
|
||||
disabled | Boolean | false | \- | N
|
||||
external-classes | Array | - | `['t-class']` | N
|
||||
offset-top | String / Number | 0 | \- | N
|
||||
z-index | Number | 99 | \- | N
|
||||
|
||||
### Sticky Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
scroll | `(detail: { scrollTop: number, isFixed: boolean })` | \-
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
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%">
|
||||
|
||||
### 基础吸顶
|
||||
|
||||
{{ base }}
|
||||
|
||||
|
||||
### 吸顶距离
|
||||
|
||||
{{ offset }}
|
||||
|
||||
### 指定容器
|
||||
|
||||
{{ container }}
|
||||
|
||||
|
||||
|
||||
## API
|
||||
### Sticky Props
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
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: 是否吸顶
|
||||
|
||||
### Sticky 外部样式类
|
||||
类名 | 说明
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-content | 内容样式类
|
||||
3
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.d.ts
vendored
Normal file
3
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './sticky';
|
||||
@ -0,0 +1,3 @@
|
||||
export * from './props';
|
||||
export * from './type';
|
||||
export * from './sticky';
|
||||
3
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.d.ts
vendored
Normal file
3
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/props.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
import { TdStickyProps } from './type';
|
||||
declare const props: TdStickyProps;
|
||||
export default props;
|
||||
@ -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
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/sticky.d.ts
vendored
Normal file
30
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/sticky.d.ts
vendored
Normal 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
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/sticky.js
Normal file
116
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/sticky.js
Normal 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;
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
<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="z-index:{{ zIndex }};{{ contentStyle }};">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
@ -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;
|
||||
}
|
||||
26
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/type.d.ts
vendored
Normal file
26
miniprogram/miniprogram_npm/tdesign-miniprogram/sticky/type.d.ts
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
export interface TdStickyProps {
|
||||
container?: {
|
||||
type: undefined;
|
||||
value?: null;
|
||||
};
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
disabled?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class'];
|
||||
};
|
||||
offsetTop?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
zIndex?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user