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

75
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/README.en-US.md Normal file
View File

@@ -0,0 +1,75 @@
:: BASE_DOC ::
## API
### Tabs 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
animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
show-bottom-line | Boolean | true | \- | N
space-evenly | Boolean | true | \- | N
split | Boolean | true | \- | N
sticky | Boolean | false | \- | N
sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
swipeable | Boolean | true | \- | N
theme | String | line | options: line/tag/card | N
value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
default-value | String / Number | undefined | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
### Tabs Events
name | params | description
-- | -- | --
change | `(value: TabValue, label: string)` | \-
click | `(value: TabValue, label: string)` | \-
scroll | `(scrollTop: number, isFixed: boolean)` | \-
### Tabs External Classes
className | Description
-- | --
t-class | \-
t-class-active | \-
t-class-content | \-
t-class-item | \-
t-class-track | \-
### TabPanel 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
badge-props | Object | - | \- | N
disabled | Boolean | false | \- | N
icon | String / Object | - | \- | N
label | String | - | \- | N
panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-tab-border-color | @component-stroke | -
--td-tab-font-size | 28rpx | -
--td-tab-icon-size | 36rpx | -
--td-tab-item-active-color | @brand-color | -
--td-tab-item-color | @font-gray-1 | -
--td-tab-item-disabled-color | @font-gray-4 | -
--td-tab-item-height | 96rpx | -
--td-tab-item-tag-active-bg | @brand-color-light | -
--td-tab-item-tag-bg | @bg-color-secondarycontainer | -
--td-tab-item-tag-height | 64rpx | -
--td-tab-item-vertical-height | 108rpx | -
--td-tab-item-vertical-width | 208rpx | -
--td-tab-nav-bg-color | @bg-color-container | -
--td-tab-track-color | @brand-color | -
--td-tab-track-radius | 8rpx | -
--td-tab-track-thickness | 6rpx | -
--td-tab-track-width | 32rpx | -

188
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/README.md Normal file
View File

@@ -0,0 +1,188 @@
---
title: Tabs 选项卡
description: 用于内容分类后的展示切换。
spline: navigation
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-80%25-blue" /></span>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-tabs": "tdesign-miniprogram/tabs/tabs",
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/YR98fimt7MSV" 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 }}
### 等距选项卡
{{ scroll }}
### 带图标选项卡
{{ with-icon }}
### 带徽章选项卡
{{ with-badge }}
### 带内容区选项卡
{{ with-content }}
### 选项卡状态
{{ status }}
### 选项卡尺寸
{{ size }}
### 选项卡样式
使用 theme 属性可以变换风格，支持 line = 线条（默认）；tag = 标签；card = 卡片
{{ theme }}
<!-- 横向选项卡支持超过屏幕滑动 -->
<img src="https://tdesign.gtimg.com/miniprogram/readme/tabs-3.png" width="375px" height="50%">
### 受控用法
```html
<t-tabs value="{{value}}" bind:change="onTabsChange">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
</t-tabs>
```
```js
Page({
data: {
value: '0',
},
onTabsChange(e) {
this.setData({ value: e.detail.value })
},
});
```
### 与 Popup 使用
```html
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange">
<t-tabs id="tabs" defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
<t-tab-panel label="标签页一" value="0">标签一内容</t-tab-panel>
<t-tab-panel label="标签页二" value="1">标签二内容</t-tab-panel>
<t-tab-panel label="标签页三" value="2">标签三内容</t-tab-panel>
</t-tabs>
</t-popup>
```
```js
Page({
data: {
visible: false
},
showPopup() {
this.setData({
visible: true
}, () => {
const tabs = this.selectComponent('tabs');
tabs.setTrack(); // 这一步很重要，因为小程序的无法正确执行生命周期，所以需要手动设置下 tabs 的滑块
})
}
})
```
## API
### Tabs Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
split | Boolean | true | `1.1.10`。是否展示分割线 | N
sticky | Boolean | false | 是否开启粘性布局 | N
sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
swipeable | Boolean | true | 是否可以滑动切换 | N
theme | String | line | 标签的样式。可选项：line/tag/card | N
value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
### Tabs Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发
click | `(value: TabValue, label: string)` | 点击选项卡时触发
scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
### Tabs External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-active | 激活态样式类
t-class-content | 内容样式类
t-class-item | 选项样式类
t-class-track | 滚动条样式类
### TabPanel Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
badge-props | Object | - | 透传至 Badge 组件 | N
disabled | Boolean | false | 是否禁用当前选项卡 | N
icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
label | String | - | 选项卡名称 | N
panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-tab-border-color | @component-stroke | -
--td-tab-font-size | 28rpx | -
--td-tab-icon-size | 36rpx | -
--td-tab-item-active-color | @brand-color | -
--td-tab-item-color | @font-gray-1 | -
--td-tab-item-disabled-color | @font-gray-4 | -
--td-tab-item-height | 96rpx | -
--td-tab-item-tag-active-bg | @brand-color-light | -
--td-tab-item-tag-bg | @bg-color-secondarycontainer | -
--td-tab-item-tag-height | 64rpx | -
--td-tab-item-vertical-height | 108rpx | -
--td-tab-item-vertical-width | 208rpx | -
--td-tab-nav-bg-color | @bg-color-container | -
--td-tab-track-color | @brand-color | -
--td-tab-track-radius | 8rpx | -
--td-tab-track-thickness | 6rpx | -
--td-tab-track-width | 32rpx | -

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

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

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

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

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

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

43
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/props.js Normal file
View File

@@ -0,0 +1,43 @@
const props = {
animation: {
type: Object,
},
externalClasses: {
type: Array,
},
showBottomLine: {
type: Boolean,
value: true,
},
spaceEvenly: {
type: Boolean,
value: true,
},
split: {
type: Boolean,
value: true,
},
sticky: {
type: Boolean,
value: false,
},
stickyProps: {
type: Object,
},
swipeable: {
type: Boolean,
value: true,
},
theme: {
type: String,
value: 'line',
},
value: {
type: null,
value: null,
},
defaultValue: {
type: null,
},
};
export default props;

55
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/tabs.d.ts vendored Normal file
View File

@@ -0,0 +1,55 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
import { TdTabsProps } from './type';
export interface TabsProps extends TdTabsProps {
}
export default class Tabs extends SuperComponent {
options: {
pureDataPattern: RegExp;
};
behaviors: string[];
externalClasses: string[];
relations: RelationsOptions;
properties: TdTabsProps;
controlledProps: {
key: string;
event: string;
}[];
observers: {
value(name: any): void;
};
data: {
prefix: string;
classPrefix: string;
tabs: any[];
currentLabels: any[];
currentIndex: number;
trackStyle: string;
offset: number;
scrollLeft: number;
tabID: string;
placement: string;
};
lifetimes: {
created(): void;
attached(): void;
};
initChildId(): void;
methods: {
onScroll(e: any): void;
updateTabs(cb: any): void;
setCurrentIndexByName(name: any): void;
setCurrentIndex(index: number): void;
getCurrentName(): any;
calcScrollOffset(containerWidth: number, targetLeft: number, targetWidth: number, offset: number): number;
getTabHeight(): Promise<any>;
getTrackSize(): Promise<number>;
setTrack(): Promise<void>;
onTabTap(event: any): void;
onTouchStart(event: any): void;
onTouchMove(event: any): void;
onTouchEnd(): void;
onTouchScroll(event: WechatMiniprogram.CustomEvent): void;
changeIndex(index: any): void;
getAvailableTabIndex(deltaX: number): any;
};
}

287
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/tabs.js Normal file
View File

@@ -0,0 +1,287 @@
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;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { SuperComponent, wxComponent } from '../common/src/index';
import props from './props';
import config from '../common/config';
import touch from '../mixins/touch';
import { getRect, uniqueFactory } from '../common/utils';
import { getObserver } from '../common/wechat';
const { prefix } = config;
const name = `${prefix}-tabs`;
const getUniqueID = uniqueFactory('tabs');
let Tabs = class Tabs extends SuperComponent {
constructor() {
super(...arguments);
this.options = {
pureDataPattern: /^currentLabels$/,
};
this.behaviors = [touch];
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-item`,
`${prefix}-class-active`,
`${prefix}-class-track`,
`${prefix}-class-content`,
];
this.relations = {
'../tab-panel/tab-panel': {
type: 'descendant',
linked(target) {
this.children.push(target);
this.initChildId();
target.index = this.children.length - 1;
this.updateTabs();
},
unlinked(target) {
this.children = this.children.filter((item) => item.index !== target.index);
this.updateTabs(() => this.setTrack());
this.initChildId();
},
},
};
this.properties = props;
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.observers = {
value(name) {
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
},
};
this.data = {
prefix,
classPrefix: name,
tabs: [],
currentLabels: [],
currentIndex: -1,
trackStyle: '',
offset: 0,
scrollLeft: 0,
tabID: '',
placement: 'top',
};
this.lifetimes = {
created() {
this.children = this.children || [];
},
attached() {
wx.nextTick(() => {
this.setTrack();
});
getRect(this, `.${name}`).then((rect) => {
this.containerWidth = rect.width;
});
this.setData({
tabID: getUniqueID(),
});
},
};
this.methods = {
onScroll(e) {
const { scrollLeft } = e.detail;
this.setData({
scrollLeft,
});
},
updateTabs(cb) {
const { children } = this;
const tabs = children.map((child) => child.data);
tabs.forEach((item) => {
if (typeof item.icon === 'string') {
item.icon = { name: item.icon };
}
});
this.setData({ tabs }, cb);
this.setCurrentIndexByName(this.properties.value);
},
setCurrentIndexByName(name) {
const { children } = this;
const index = children.findIndex((child) => child.getComputedName() === `${name}`);
if (index > -1) {
this.setCurrentIndex(index);
}
},
setCurrentIndex(index) {
if (index <= -1 || index >= this.children.length)
return;
const Labels = [];
this.children.forEach((child, idx) => {
const isActive = index === idx;
if (isActive !== child.data.active || !child.initialized) {
child.render(isActive, this);
}
Labels.push(child.data.label);
});
const { currentIndex, currentLabels } = this.data;
if (currentIndex === index && currentLabels.join('') === Labels.join(''))
return;
this.setData({
currentIndex: index,
currentLabels: Labels,
}, () => {
this.setTrack();
});
},
getCurrentName() {
if (this.children) {
const activeTab = this.children[this.data.currentIndex];
if (activeTab) {
return activeTab.getComputedName();
}
}
},
calcScrollOffset(containerWidth, targetLeft, targetWidth, offset) {
return offset + targetLeft - (1 / 2) * containerWidth + targetWidth / 2;
},
getTabHeight() {
return getRect(this, `.${name}`);
},
getTrackSize() {
return new Promise((resolve, reject) => {
if (this.trackWidth) {
resolve(this.trackWidth);
return;
}
getRect(this, `.${prefix}-tabs__track`)
.then((res) => {
if (res) {
this.trackWidth = res.width;
resolve(this.trackWidth);
}
})
.catch(reject);
});
},
setTrack() {
return __awaiter(this, void 0, void 0, function* () {
const { children } = this;
if (!children)
return;
const { currentIndex } = this.data;
if (currentIndex <= -1)
return;
try {
const res = yield getRect(this, `.${prefix}-tabs__item`, true);
const rect = res[currentIndex];
if (!rect)
return;
let count = 0;
let distance = 0;
let totalSize = 0;
res.forEach((item) => {
if (count < currentIndex) {
distance += item.width;
count += 1;
}
totalSize += item.width;
});
if (this.containerWidth) {
const offset = this.calcScrollOffset(this.containerWidth, rect.left, rect.width, this.data.scrollLeft);
const maxOffset = totalSize - this.containerWidth;
this.setData({
offset: Math.min(Math.max(offset, 0), maxOffset),
});
}
else if (!this._hasObserved) {
this._hasObserved = true;
getObserver(this, `.${name}`).then(() => this.setTrack());
}
if (this.data.theme === 'line') {
const trackLineWidth = yield this.getTrackSize();
distance += (rect.width - trackLineWidth) / 2;
}
this.setData({
trackStyle: `-webkit-transform: translateX(${distance}px);
transform: translateX(${distance}px);
`,
});
}
catch (err) {
this.triggerEvent('error', err);
}
});
},
onTabTap(event) {
const { index } = event.currentTarget.dataset;
this.changeIndex(index);
},
onTouchStart(event) {
if (!this.properties.swipeable)
return;
this.touchStart(event);
},
onTouchMove(event) {
if (!this.properties.swipeable)
return;
this.touchMove(event);
},
onTouchEnd() {
if (!this.properties.swipeable)
return;
const { direction, deltaX, offsetX } = this;
const minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
const index = this.getAvailableTabIndex(deltaX);
if (index !== -1) {
this.changeIndex(index);
}
}
},
onTouchScroll(event) {
this._trigger('scroll', event.detail);
},
changeIndex(index) {
const currentTab = this.data.tabs[index];
const { value, label } = currentTab;
if (!(currentTab === null || currentTab === void 0 ? void 0 : currentTab.disabled) && index !== this.data.currentIndex) {
this._trigger('change', { value, label });
}
this._trigger('click', { value, label });
},
getAvailableTabIndex(deltaX) {
const step = deltaX > 0 ? -1 : 1;
const { currentIndex, tabs } = this.data;
const len = tabs.length;
for (let i = step; currentIndex + step >= 0 && currentIndex + step < len; i += step) {
const newIndex = currentIndex + i;
if (newIndex >= 0 && newIndex < len && tabs[newIndex]) {
if (!tabs[newIndex].disabled) {
return newIndex;
}
}
else {
return currentIndex;
}
}
return -1;
},
};
}
initChildId() {
this.children.forEach((item, index) => {
item.setId(`${this.data.tabID}_panel_${index}`);
});
}
};
Tabs = __decorate([
wxComponent()
], Tabs);
export default Tabs;

9
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/tabs.json Normal file
View File

@@ -0,0 +1,9 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-sticky": "../sticky/sticky",
"t-badge": "../badge/badge",
"t-icon": "../icon/icon"
}
}

82
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxml Normal file
View File

@@ -0,0 +1,82 @@
<import src="../common/template/badge.wxml" />
<import src="../common/template/icon.wxml" />
<wxs src="./tabs.wxs" module="filters" />
<wxs src="../common/utils.wxs" module="_" />
<view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [placement])}} class {{prefix}}-class">
<t-sticky
t-class="{{_.cls(classPrefix + '__sticky', [placement])}}"
disabled="{{ !sticky }}"
z-index="{{ stickyProps.zIndex || '1' }}"
offset-top="{{ stickyProps.offsetTop || 0 }}"
container="{{ stickyProps.container }}"
bind:scroll="onTouchScroll"
>
<view class="{{_.cls(classPrefix + '__wrapper', [theme])}}">
<scroll-view
class="{{_.cls(classPrefix + '__scroll', [placement, ['split', split]])}}"
enhanced
enable-flex
scroll-left="{{offset}}"
scroll-x="{{true}}"
scroll-anchoring
scroll-with-animation
enable-passive
show-scrollbar="{{false}}"
type="list"
bind:scroll="onScroll"
>
<view class="{{_.cls(classPrefix + '__nav', [placement, ['evenly', spaceEvenly]])}}" aria-role="tablist">
<view
wx:for="{{tabs}}"
wx:key="index"
data-index="{{index}}"
class="{{_.cls(classPrefix + '__item', [theme, ['evenly', spaceEvenly], placement, ['disabled', item.disabled], ['active', currentIndex === index]])}} {{currentIndex === index ? prefix + '-class-active' : ''}} {{prefix}}-class-item"
bind:tap="onTabTap"
aria-role="tab"
aria-controls="{{tabID + '_panel_' + index}}"
aria-selected="{{currentIndex === index}}"
aria-disabled="{{item.disabled}}"
aria-label="{{ ariaLabel || (item.badgeProps.dot || item.badgeProps.count ? item.label + _.getBadgeAriaLabel({ ...item.badgeProps }) : '') }}"
>
<view
class="{{_.cls(classPrefix + '__item-inner', [theme, ['active', currentIndex === index]])}}"
aria-hidden="{{ item.badgeProps.dot || item.badgeProps.count }}"
>
<template wx:if="{{item.icon}}" is="icon" data="{{ tClass: classPrefix + '__icon', ...item.icon }}" />
<block wx:if="{{item.badgeProps}}">
<template
is="badge"
data="{{ ...item.badgeProps, content: item.label, tClass: _.cls(classPrefix + '__badge', [ ['disabled', item.disabled], ['active', currentIndex === index]])}}"
/>
</block>
<block wx:else>{{item.label}}</block>
</view>
<view wx:if="{{theme == 'card' && currentIndex - 1 == index}}" class="{{classPrefix}}__item-prefix" />
<view wx:if="{{theme == 'card' && currentIndex + 1 == index}}" class="{{classPrefix}}__item-suffix" />
</view>
<view
wx:if="{{theme == 'line' && showBottomLine}}"
class="{{_.cls(classPrefix + '__track', [placement])}} {{prefix}}-class-track"
style="{{trackStyle}}"
/>
</view>
</scroll-view>
</view>
</t-sticky>
<slot name="middle" />
<view
class="{{_.cls(classPrefix + '__content', [['animated', animation]])}}"
bind:touchstart="onTouchStart"
bind:touchmove="onTouchMove"
bind:touchend="onTouchEnd"
bind:touchcancel="onTouchEnd"
>
<view
class="{{classPrefix}}__content-inner {{prefix}}-class-content"
style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex}) }}"
>
<slot />
</view>
</view>
</view>

16
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxs Normal file
View File

@@ -0,0 +1,16 @@
/* eslint-disable */
function animate(options) {
var result = [];
if (options.duration) {
result.push('transition-duration: ' + options.duration + 's');
result.push('transform: translate3d( ' + -100 * options.currentIndex + '%,0, 0)');
}
return result.join(';');
}
module.exports = {
animate: animate,
};

210
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxss Normal file
View File

@@ -0,0 +1,210 @@
.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-tabs {
position: relative;
font-size: var(--td-tab-font-size, 28rpx);
background: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
flex-wrap: wrap;
}
.t-tabs__wrapper {
display: flex;
overflow: hidden;
background: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-tabs__wrapper--card {
background: var(--td-tab-item-tag-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
--td-tab-border-color: transparent;
}
.t-tabs__item {
position: relative;
display: flex;
flex: none;
align-items: center;
justify-content: center;
font-weight: 400;
color: var(--td-tab-item-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
padding: 0 var(--td-spacer-2, 32rpx);
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
height: var(--td-tab-item-height, 96rpx);
}
.t-tabs__item--active {
font-weight: 600;
color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-tabs__item--disabled {
color: var(--td-tab-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-tabs__item--evenly {
flex: 1 0 auto;
}
.t-tabs__item-inner {
display: flex;
align-items: center;
justify-content: center;
}
.t-tabs__item-inner--tag {
width: 100%;
text-align: center;
padding: 0 var(--td-spacer-2, 32rpx);
line-height: var(--td-tab-item-tag-height, 64rpx);
border-radius: calc(var(--td-tab-item-tag-height, 64rpx) / 2);
background-color: var(--td-tab-item-tag-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-tabs__item-inner--active.t-tabs__item-inner--tag {
background-color: var(--td-tab-item-tag-active-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
}
.t-tabs__item--tag:not(.t-tabs__item--evenly) {
padding: 0 calc(var(--td-spacer, 16rpx) / 2);
}
.t-tabs__item--tag:not(.t-tabs__item--evenly):first-child {
margin-left: var(--td-spacer, 16rpx);
}
.t-tabs__item--tag:not(.t-tabs__item--evenly):last-child {
padding-right: var(--td-spacer-1, 24rpx);
}
.t-tabs__item--tag {
padding: 0 var(--td-spacer, 16rpx);
}
.t-tabs__item--card.t-tabs__item--active {
background-color: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
border-radius: var(--td-radius-large, 18rpx) var(--td-radius-large, 18rpx) 0 0;
}
.t-tabs__item--card.t-tabs__item--active:first-child {
border-top-left-radius: 0;
}
.t-tabs__item--card.t-tabs__item--active:last-child {
border-top-right-radius: 0;
}
.t-tabs__item--card.t-tabs__item--pre {
border-bottom-right-radius: var(--td-radius-large, 18rpx);
}
.t-tabs__item-prefix,
.t-tabs__item-suffix {
position: absolute;
bottom: 0;
width: 18rpx;
height: 18rpx;
background-color: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-tabs__item-prefix::after,
.t-tabs__item-suffix::after {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: var(--td-tab-item-tag-bg, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-tabs__item-prefix {
right: 0;
}
.t-tabs__item-prefix::after {
border-bottom-right-radius: var(--td-radius-large, 18rpx);
}
.t-tabs__item-suffix {
left: 0;
}
.t-tabs__item-suffix::after {
border-bottom-left-radius: var(--td-radius-large, 18rpx);
}
.t-tabs__badge--active {
--td-badge-content-text-color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-tabs__badge--disabled {
--td-badge-content-text-color: var(--td-tab-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-tabs__icon {
font-size: var(--td-tab-icon-size, 36rpx);
margin-right: calc(var(--td-spacer, 16rpx) / 4);
}
.t-tabs__content {
overflow: hidden;
}
.t-tabs__nav {
position: relative;
user-select: none;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.t-tabs__nav.t-tabs__nav--evenly {
width: 100%;
}
.t-tabs__track {
position: absolute;
font-weight: 600;
z-index: 1;
transition-duration: 0.3s;
background-color: var(--td-tab-track-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
left: 0;
bottom: 1rpx;
width: var(--td-tab-track-width, 32rpx);
height: var(--td-tab-track-thickness, 6rpx);
border-radius: var(--td-tab-track-radius, 8rpx);
}
.t-tabs__scroll {
position: relative;
height: var(--td-tab-item-height, 96rpx);
}
.t-tabs__scroll--split {
position: relative;
}
.t-tabs__scroll--split::after {
content: '';
display: block;
position: absolute;
top: unset;
bottom: 0;
left: unset;
right: unset;
background-color: var(--td-tab-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
}
.t-tabs__scroll--split::after {
height: 1px;
left: 0;
right: 0;
transform: scaleY(0.5);
}
.t-tabs__scroll::-webkit-scrollbar {
display: none;
}
.t-tabs__content {
width: 100%;
}
.t-tabs__content-inner {
display: block;
}
.t-tabs__content--animated .t-tabs__content-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
will-change: left;
transition-property: transform;
}

51
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tabs/type.d.ts vendored Normal file
View File

@@ -0,0 +1,51 @@
import { StickyProps } from '../sticky/index';
export interface TdTabsProps {
animation?: {
type: ObjectConstructor;
value?: TabAnimation;
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-item', 't-class-active', 't-class-track'];
};
showBottomLine?: {
type: BooleanConstructor;
value?: boolean;
};
spaceEvenly?: {
type: BooleanConstructor;
value?: boolean;
};
split?: {
type: BooleanConstructor;
value?: boolean;
};
sticky?: {
type: BooleanConstructor;
value?: boolean;
};
stickyProps?: {
type: ObjectConstructor;
value?: StickyProps;
};
swipeable?: {
type: BooleanConstructor;
value?: boolean;
};
theme?: {
type: StringConstructor;
value?: 'line' | 'tag' | 'card';
};
value?: {
type: null;
value?: TabValue;
};
defaultValue?: {
type: null;
value?: TabValue;
};
}
export declare type TabAnimation = {
duration: number;
} & Record<string, any>;
export declare type TabValue = string | number;

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

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