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

project init & fix ui

Browse Source
This commit is contained in:
limqhz
2023-01-06 14:24:11 +08:00
parent abc4f65a8e
commit ac9b479805
866 changed files with 39916 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
miniprogram_npm/tdesign-miniprogram/indexes/README.en-US.md Normal file
View File

@@ -0,0 +1,25 @@
:: BASE_DOC ::
## API
### Indexes Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | String | - | `0.25.0` | N
index-list | Array | - | `0.32.0`。Typescript：`string [] \| number[]` | N
list | Array | [] | `deprecated`。Typescript：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N
sticky | Boolean | true | Typescript：`Boolean` | N
### Indexes Events
name | params | description
-- | -- | --
select | `(indexes: { groupIndex: string; childrenIndex: number })` | \-
### IndexesAnchor Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | String | - | \- | N
external-classes | Array | - | `['t-class']` | N
index | String / Number | - | \- | N

62
miniprogram_npm/tdesign-miniprogram/indexes/README.md Normal file
View File

@@ -0,0 +1,62 @@
---
title: Indexes 索引
description: 用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。
spline: navigation
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-85%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-65%25-red" /></span>
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
IndexesAnchor 索引锚点组件于 0.32.0 版本上线，请留意版本。
</div>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-indexes": "tdesign-miniprogram/indexes/indexes",
"t-indexes-anchor": "tdesign-miniprogram/indexes-anchor/indexes-anchor"
}
```
## 代码演示
### 基础索引
{{ base }}
### 自定义索引
{{ custom }}
### API
### Indexes Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
custom-style | String | - | `0.25.0`。自定义组件样式 | N
index-list | Array | - | `0.32.0`。索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N
list | Array | [] | 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。。TS 类型：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/indexes/type.ts) | N
sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
### Indexes Events
名称 | 参数 | 描述
-- | -- | --
select | `(indexes: { groupIndex: string; childrenIndex: number })` | 点击行元素时触发事件
### IndexesAnchor Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
custom-style | String | - | 自定义组件样式 | N
external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | N
index | String / Number | - | 索引字符 | N

44
miniprogram_npm/tdesign-miniprogram/indexes/indexes.d.ts vendored Normal file
View File

@@ -0,0 +1,44 @@
import { RelationsOptions, SuperComponent } from '../common/src/index';
export default class Indexes extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdIndexesProps;
data: {
prefix: string;
classPrefix: string;
_height: number;
_indexList: any[];
scrollTop: number;
activeAnchor: any;
showTips: boolean;
};
relations: RelationsOptions;
behaviors: string[];
timer: any;
groupTop: any[];
sidebar: any;
observers: {
indexList(v: any): void;
height(v: any): void;
};
lifetimes: {
ready(): void;
};
methods: {
setHeight(height: string | number): void;
setIndexList(list: any): void;
getAllRect(): void;
getAnchorsRect(): Promise<any[]>;
getSidebarRect(): void;
toggleTips(flag: boolean): void;
setAnchorByIndex(index: any): void;
onClick(e: any): void;
onTouchMove(e: any): void;
onTouchCancel(): void;
onTouchEnd(e: any): void;
onAnchorTouch: (...args: any[]) => void;
setAnchorOnScroll(scrollTop: number): void;
onScroll({ scrollTop }: {
scrollTop: any;
}): void;
};
}

221
miniprogram_npm/tdesign-miniprogram/indexes/indexes.js Normal file
View File

@@ -0,0 +1,221 @@
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 config from '../common/config';
import props from './props';
import { getRect, throttle } from '../common/utils';
import pageScrollMixin from '../mixins/page-scroll';
const { prefix } = config;
const name = `${prefix}-indexes`;
let Indexes = class Indexes extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`, `${prefix}-class-sidebar`, `${prefix}-class-sidebar-item`];
this.properties = props;
this.data = {
prefix,
classPrefix: name,
_height: 0,
_indexList: [],
scrollTop: 0,
activeAnchor: null,
showTips: false,
};
this.relations = {
'../indexes-anchor/indexes-anchor': {
type: 'child',
},
};
this.behaviors = [
pageScrollMixin(function (event) {
this.onScroll(event);
}),
];
this.timer = null;
this.groupTop = [];
this.sidebar = null;
this.observers = {
indexList(v) {
this.setIndexList(v);
},
height(v) {
this.setHeight(v);
},
};
this.lifetimes = {
ready() {
var _a;
if (this.data._height === 0) {
this.setHeight();
}
if (((_a = this.data._indexList) === null || _a === void 0 ? void 0 : _a.length) === 0) {
this.setIndexList();
}
},
};
this.methods = {
setHeight(height) {
if (!height) {
const { windowHeight } = wx.getSystemInfoSync();
height = windowHeight;
}
this.setData({
_height: height,
}, () => {
this.getAllRect();
});
},
setIndexList(list) {
if (!list) {
const start = 'A'.charCodeAt(0);
const alphabet = [];
for (let i = start, end = start + 26; i < end; i += 1) {
alphabet.push(String.fromCharCode(i));
}
this.setData({ _indexList: alphabet });
}
else {
this.setData({ _indexList: list });
}
},
getAllRect() {
this.getAnchorsRect().then(() => {
this.groupTop.forEach((item, index) => {
const next = this.groupTop[index + 1];
item.totalHeight = ((next === null || next === void 0 ? void 0 : next.top) || Infinity) - item.top;
});
this.setAnchorOnScroll(0);
});
this.getSidebarRect();
},
getAnchorsRect() {
return Promise.all(this.$children.map((child) => getRect(child, `.${name}-anchor`).then((rect) => {
this.groupTop.push({
height: rect.height,
top: rect.top,
anchor: child.data.index,
});
})));
},
getSidebarRect() {
getRect(this, `#id-${name}__bar`).then((rect) => {
const { top, height } = rect;
const { length } = this.data._indexList;
this.sidebar = {
top,
height,
itemHeight: (height - (length - 1) * 2) / length,
};
});
},
toggleTips(flag) {
if (!flag) {
clearInterval(this.timer);
this.timer = setTimeout(() => {
this.setData({
showTips: false,
});
}, 300);
}
else {
this.setData({
showTips: true,
});
}
},
setAnchorByIndex(index) {
if (this.preIndex != null && this.preIndex === index)
return;
const { _indexList } = this.data;
const activeAnchor = _indexList[index];
const target = this.groupTop.find((item) => item.anchor === activeAnchor);
if (target) {
wx.pageScrollTo({
scrollTop: target.top,
duration: 0,
});
}
this.preIndex = index;
this.toggleTips(true);
this.triggerEvent('select', { index: activeAnchor });
},
onClick(e) {
const { index } = e.currentTarget.dataset;
this.setAnchorByIndex(index);
},
onTouchMove(e) {
this.onAnchorTouch(e);
},
onTouchCancel() {
this.toggleTips(false);
},
onTouchEnd(e) {
this.toggleTips(false);
this.onAnchorTouch(e);
},
onAnchorTouch: throttle(function (e) {
const getAnchorIndex = (clientY) => {
const offsetY = clientY - this.sidebar.top;
if (offsetY <= 0) {
return 0;
}
if (offsetY > this.sidebar.height) {
return this.data._indexList.length - 1;
}
return Math.floor(offsetY / this.sidebar.itemHeight);
};
const index = getAnchorIndex(e.changedTouches[0].clientY);
this.setAnchorByIndex(index);
}, 1000 / 30),
setAnchorOnScroll(scrollTop) {
if (!this.groupTop) {
return;
}
const { sticky } = this.data;
const curIndex = this.groupTop.findIndex((group) => scrollTop >= group.top - group.height && scrollTop <= group.top + group.totalHeight - group.height);
if (curIndex === -1)
return;
const curGroup = this.groupTop[curIndex];
this.setData({
activeAnchor: curGroup.anchor,
});
if (sticky) {
const offset = curGroup.top - scrollTop;
const betwixt = offset < curGroup.height && offset > 0 && scrollTop > 0;
this.$children.forEach((child, index) => {
if (index === curIndex) {
child.setData({
sticky: scrollTop > 0,
active: true,
customStyle: `height: ${curGroup.height}px`,
anchorStyle: `transform: translate3d(0, ${betwixt ? offset : 0}px, 0)`,
});
}
else if (index + 1 === curIndex) {
child.setData({
sticky: true,
active: true,
customStyle: `height: ${curGroup.height}px`,
anchorStyle: `transform: translate3d(0, ${betwixt ? offset - curGroup.height : 0}px, 0)`,
});
}
else {
child.setData({ active: false, sticky: false, anchorStyle: '' });
}
});
}
},
onScroll({ scrollTop }) {
this.setAnchorOnScroll(scrollTop);
},
};
}
};
Indexes = __decorate([
wxComponent()
], Indexes);
export default Indexes;

8
miniprogram_npm/tdesign-miniprogram/indexes/indexes.json Normal file
View File

@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"t-icon": "../icon/icon",
"t-cell": "../cell/cell",
"t-cell-group": "../cell-group/cell-group"
}
}

25
miniprogram_npm/tdesign-miniprogram/indexes/indexes.wxml Normal file
View File

@@ -0,0 +1,25 @@
<wxs src="../common/utils.wxs" module="_" />
<view style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class">
<view
class="{{classPrefix}}__sidebar {{prefix}}-class-sidebar"
id="id-{{classPrefix}}__bar"
catch:touchmove="onTouchMove"
catch:touchcancel="onTouchCancel"
catch:touchend="onTouchEnd"
>
<view
class="{{_.cls(classPrefix + '__sidebar-item', [['active', activeAnchor === item]])}} {{prefix}}-class-sidebar-item"
wx:for="{{ _indexList }}"
wx:key="index"
bind:tap="onClick"
data-index="{{index}}"
>
<view aria-role="button" aria-label="{{ activeAnchor === item ? '已选中' + item : ''}}"> {{ item }} </view>
<view class="{{classPrefix}}__sidebar-tips" wx:if="{{ showTips && activeAnchor === item }}">
{{ activeAnchor }}
</view>
</view>
</view>
<slot />
</view>

72
miniprogram_npm/tdesign-miniprogram/indexes/indexes.wxss Normal file
View File

@@ -0,0 +1,72 @@
.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-indexes {
position: relative;
height: 100vh;
}
.t-indexes__sidebar {
position: fixed;
right: 0;
width: var(--td-indexes-sidebar-item-size, 40rpx);
color: var(--td-indexes-sidebar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
font-size: var(--td-indexes-sidebar-font-size, 24rpx);
line-height: var(--td-indexes-sidebar-line-height, 40rpx);
display: flex;
flex-flow: column nowrap;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.t-indexes__sidebar-item {
border-radius: 50%;
position: relative;
text-align: center;
}
.t-indexes__sidebar-item--active {
background-color: var(--td-indexes-sidebar-active-bg-color, var(--td-primary-color, #0052d9));
color: var(--td-indexes-sidebar-active-color, var(--td-white-color-1, #fff));
}
.t-indexes__sidebar-item + .t-indexes__sidebar-item {
margin-top: 4rpx;
}
.t-indexes__sidebar-tips {
width: var(--td-indexes-sidebar-tips-size, 96rpx);
height: var(--td-indexes-sidebar-tips-size, 96rpx);
line-height: var(--td-indexes-sidebar-tips-size, 96rpx);
text-align: center;
font-size: var(--td-indexes-sidebar-tips-font-size, 40rpx);
font-weight: 700;
color: var(--td-indexes-sidebar-tips-color, var(--td-primary-color, #0052d9));
background-color: var(--td-indexes-sidebar-tips-bg-color, var(--td-primary-color-1, #ecf2fe));
border-radius: 50%;
position: absolute;
top: 50%;
bottom: 0;
transform: translateY(-50%);
right: var(--td-indexes-sidebar-tips-right, 76rpx);
}

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

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

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

@@ -0,0 +1,18 @@
const props = {
customStyle: {
type: String,
value: '',
},
indexList: {
type: Array,
},
list: {
type: Array,
value: [],
},
sticky: {
type: Boolean,
value: true,
},
};
export default props;

26
miniprogram_npm/tdesign-miniprogram/indexes/type.d.ts vendored Normal file
View File

@@ -0,0 +1,26 @@
export interface TdIndexesProps {
customStyle?: {
type: StringConstructor;
value?: string;
};
indexList?: {
type: ArrayConstructor;
value?: string[] | number[];
};
list?: {
type: ArrayConstructor;
value?: ListItem[];
};
sticky?: {
type: BooleanConstructor;
value?: Boolean;
};
}
export interface ListItem {
title: string;
index: string;
children: {
title: string;
[key: string]: any;
}[];
}

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

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