白色主题

This commit is contained in:
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions

View File

@@ -7,33 +7,38 @@ name | type | default | description | required
-- | -- | -- | -- | --
autoplay | Boolean | true | \- | N
current | Number | 0 | \- | N
default-current | Number | undefined | uncontrolled property | N
custom-style | String | - | `0.25.0` | N
direction | String | horizontal | optionshorizontal/vertical | N
display-multiple-items | Number | 1 | `0.32.0` | N
duration | Number | 300 | \- | N
easing-function | String | default | `0.32.0`。optionsdefault/linear/easeInCubic/easeOutCubic/easeInOutCubic | N
height | String / Number | '192px' | \- | N
height | String / Number | 192 | \- | N
image-props | Object | - | `0.34.0` | N
interval | Number | 5000 | \- | N
list | Array | - | `0.32.0`。Typescript`string[]` | N
loop | Boolean | true | \- | N
navigation | Object / Slot | - | \- | N
navigation | Boolean / Object / Slot | true | Typescript`SwiperNavProps \| boolean`[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
next-margin | String / Number | 0 | `0.32.0` | N
pagination-position | String | bottom | optionstop-left/top/top-right/bottom-left/bottom/bottom-right | N
previous-margin | String / Number | 0 | `0.32.0` | N
snao-to-edge | Boolean | false | `0.32.0` | N
snap-to-edge | Boolean | false | `0.32.0` | N
### Swiper Events
name | params | description
-- | -- | --
change | `(current: number, source: SwiperChangeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| ''`<br/>
change | `(current: number, source: SwiperChangeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
click | `(index: number)` | `0.34.0`
### SwiperNavigation
### SwiperNav Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | String | - | `0.25.0` | N
min-show-num | Number | - | \- | N
show-slide-btn | Boolean | - | \- | N
type | String | - | Typescript`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
current | Number | 0 | `0.34.0` | N
custom-style | String | - | `0.34.0` | N
direction | String | horizontal | `0.34.0`。optionshorizontal/vertical | N
min-show-num | Number | 2 | \- | N
pagination-position | String | bottom | `0.34.0`。optionstop-left/top/top-right/bottom-left/bottom/bottom-right | N
show-controls | Boolean | false | `0.32.0` | N
total | Number | 0 | `0.34.0` | N
type | String | dots | Typescript`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N

View File

@@ -13,7 +13,7 @@ isComponent: true
```json
"usingComponents": {
"t-swiper": "tdesign-miniprogram/swiper/swiper",
"t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav",
"t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
}
```
@@ -67,11 +67,12 @@ direction | String | horizontal | 轮播滑动方向,包括横向滑动和纵
display-multiple-items | Number | 1 | `0.32.0`。同时显示的滑块数量 | N
duration | Number | 300 | 滑动动画时长 | N
easing-function | String | default | `0.32.0`。指定 swiper 切换缓动动画类型。可选项default/linear/easeInCubic/easeOutCubic/easeInOutCubic | N
height | String / Number | '192px' | 轮播的高度;默认单位 `px` | N
height | String / Number | 192 | 轮播的高度;默认单位 `px` | N
image-props | Object | - | `0.34.0`。透传至 Image 组件 | N
interval | Number | 5000 | 轮播间隔时间 | N
list | Array | - | `0.32.0`。图片列表。TS 类型:`string[]` | N
loop | Boolean | true | 是否循环播放 | N
navigation | Object / Slot | - | 导航器全部配置 | N
navigation | Boolean / Object / Slot | true | 导航器全部配置true 的话使用默认配置。TS 类型:`SwiperNavProps \| boolean`[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
next-margin | String / Number | 0 | `0.32.0`。后边距,可用于露出后一项的一小部分。默认单位 `px` | N
pagination-position | String | bottom | 页码信息展示位置。可选项top-left/top/top-right/bottom-left/bottom/bottom-right | N
previous-margin | String / Number | 0 | `0.32.0`。前边距,可用于露出前一项的一小部分。默认单位 `px` | N
@@ -82,12 +83,17 @@ snap-to-edge | Boolean | false | `0.32.0`。当 swiper-item 的个数大于等
名称 | 参数 | 描述
-- | -- | --
change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
click | `(index: number)` | `0.34.0`。点击轮播项时触发
### SwiperNavigation
### SwiperNav Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
custom-style | String | - | `0.25.0`自定义组件样式 | N
min-show-num | Number | - | 小于这个数字不会显示导航器 | N
show-controls | Boolean | false | 是否显示两侧的控制按钮 | N
type | String | - | 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
current | Number | 0 | `0.34.0`当前轮播在哪一项(下标) | N
custom-style | String | - | `0.34.0`。自定义组件样式 | N
direction | String | horizontal | `0.34.0`。轮播滑动方向包括横向滑动和纵向滑动两个方向。可选项horizontal/vertical | N
min-show-num | Number | 2 | 小于这个数字不会显示导航器 | N
pagination-position | String | bottom | `0.34.0`。页码信息展示位置。可选项top-left/top/top-right/bottom-left/bottom/bottom-right | N
show-controls | Boolean | false | `0.32.0`。是否显示两侧的控制按钮 | N
total | Number | 0 | `0.34.0`。总共的项数 | N
type | String | dots | 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N

View File

@@ -1,7 +1,25 @@
module.exports.isPrev = function(current, index, list) {
function isPrev(current, index, list) {
return (current - 1 + list.length) % list.length === index;
}
module.exports.isNext = function(current, index, list) {
function isNext(current, index, list) {
return (current + 1 + list.length) % list.length === index;
}
}
function getImageClass(prefix, current, index, list) {
var arr = [prefix + '-swiper__image', prefix + '-class-image'];
if (isPrev(current, index, list)) {
arr.push(prefix + '-class-prev-image')
}
if (isNext(current, index, list)) {
arr.push(prefix + '-class-next-image')
}
return arr.join(' ');
}
module.exports.isPrev = isPrev;
module.exports.isNext = isNext;
module.exports.getImageClass = getImageClass;

View File

@@ -4,14 +4,10 @@ const props = {
value: true,
},
current: {
type: Number,
value: null,
},
defaultCurrent: {
type: Number,
value: 0,
},
customStyle: {
style: {
type: String,
value: '',
},
@@ -33,7 +29,10 @@ const props = {
},
height: {
type: null,
value: '192px',
value: 192,
},
imageProps: {
type: Object,
},
interval: {
type: Number,
@@ -47,7 +46,8 @@ const props = {
value: true,
},
navigation: {
type: Object,
type: null,
value: true,
},
nextMargin: {
type: null,

View File

@@ -1,37 +0,0 @@
import { SuperComponent, RelationsOptions } from '../common/src/index';
declare type NavOptions = {
index: number;
total: number;
direction: boolean;
paginationPosition: string;
};
export default class SwiperNav extends SuperComponent {
externalClasses: string[];
properties: {
type: {
type: StringConstructor;
value: string;
};
minShowNum: {
type: NumberConstructor;
value: number;
};
showControls: {
type: BooleanConstructor;
value: boolean;
};
};
relations: RelationsOptions;
data: {
index: number;
total: number;
direction: string;
prefix: string;
classPrefix: string;
};
methods: {
onChange(opt: NavOptions): void;
nav(e: any): void;
};
}
export {};

View File

@@ -1,60 +0,0 @@
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';
const { prefix } = config;
const name = `${prefix}-swiper-nav`;
let SwiperNav = class SwiperNav extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`];
this.properties = {
type: {
type: String,
value: 'dots',
},
minShowNum: {
type: Number,
value: 2,
},
showControls: {
type: Boolean,
value: false,
},
};
this.relations = {
'./swiper': {
type: 'parent',
},
};
this.data = {
index: 0,
total: 0,
direction: 'horizontal',
prefix,
classPrefix: name,
};
this.methods = {
onChange(opt) {
this.setData(Object.assign({}, opt));
},
nav(e) {
var _a;
const { dir } = e.target.dataset;
const source = 'nav';
this.triggerEvent('navBtnChange', { dir, source });
if (this.$parent) {
(_a = this.$parent) === null || _a === void 0 ? void 0 : _a.doNavBtnChange(dir, source);
}
},
};
}
};
SwiperNav = __decorate([
wxComponent()
], SwiperNav);
export default SwiperNav;

View File

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

View File

@@ -1,21 +0,0 @@
<wxs src="../common/utils.wxs" module="_" />
<view wx:if="{{showControls}}" class="{{classPrefix}}__btn">
<view class="{{classPrefix}}__btn--prev" bind:tap="nav" data-dir="prev" />
<view class="{{classPrefix}}__btn--next" bind:tap="nav" data-dir="next" />
</view>
<view
wx:if="{{total >= minShowNum}}"
style="{{ customStyle }}"
class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{direction}} {{classPrefix}}__{{type}} {{classPrefix}}--{{paginationPosition}}"
>
<block wx:if="{{ type === 'dots' || type === 'dots-bar'}}">
<view
wx:for="{{total}}"
wx:for-index="idx"
wx:key="idx"
class="{{_.cls(classPrefix + '__' + type + '-item', [['active', index === idx], direction])}}"
/>
</block>
<block wx:if="{{ type === 'fraction'}}"> {{index + 1}}/{{total}} </block>
</view>

View File

@@ -1,152 +0,0 @@
.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-swiper-nav__dots,
.t-swiper-nav__dots-bar {
display: flex;
flex-direction: row;
}
.t-swiper-nav__dots-item,
.t-swiper-nav__dots-bar-item {
width: var(--td-swiper-nav-dot-size, 12rpx);
height: var(--td-swiper-nav-dot-size, 12rpx);
background: var(--td-swiper-nav-dot-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
border-radius: 50%;
margin: 0 10rpx;
transition: all 0.4s ease-in;
}
.t-swiper-nav__dots-item--vertical,
.t-swiper-nav__dots-bar-item--vertical {
margin: 10rpx 0;
}
.t-swiper-nav__dots-item--active,
.t-swiper-nav__dots-bar-item--active {
background-color: var(--td-swiper-nav-dot-active-color, var(--td-font-white-1, #ffffff));
}
.t-swiper-nav__dots-bar-item--vertical.t-swiper-nav__dots-bar-item--active {
width: var(--td-swiper-nav-dot-size, 12rpx);
height: var(--td-swiper-nav-dots-bar-active-width, 40rpx);
}
.t-swiper-nav__dots-bar-item--active {
width: var(--td-swiper-nav-dots-bar-active-width, 40rpx);
border-radius: calc(var(--td-swiper-nav-dot-size, 12rpx) / 2);
background-color: var(--td-swiper-nav-dot-active-color, var(--td-font-white-1, #ffffff));
}
.t-swiper-nav--left {
position: absolute;
left: 24rpx;
top: 50%;
transform: translateY(-50%);
}
.t-swiper-nav--right {
position: absolute;
right: 24rpx;
top: 50%;
transform: translateY(-50%);
}
.t-swiper-nav--top-left {
position: absolute;
top: 24rpx;
left: 24rpx;
}
.t-swiper-nav--top {
position: absolute;
left: 50%;
top: 24rpx;
transform: translateX(-50%);
}
.t-swiper-nav--top-right {
position: absolute;
top: 24rpx;
right: 24rpx;
}
.t-swiper-nav--bottom-left {
position: absolute;
left: 24rpx;
bottom: 24rpx;
}
.t-swiper-nav--bottom {
position: absolute;
left: 50%;
bottom: 24rpx;
transform: translateX(-50%);
}
.t-swiper-nav--bottom-right {
position: absolute;
right: 24rpx;
bottom: 24rpx;
}
.t-swiper-nav--vertical {
flex-direction: column;
}
.t-swiper-nav__fraction {
padding: 0 16rpx;
height: var(--td-swiper-nav-fraction-height, 48rpx);
line-height: var(--td-swiper-nav-fraction-height, 48rpx);
border-radius: calc(var(--td-swiper-nav-fraction-height, 48rpx) / 2);
background: var(--td-swiper-nav-fraction-bg-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
color: var(--td-swiper-nav-fraction-color, var(--td-font-white-1, #ffffff));
font-size: var(--td-swiper-nav-fraction-font-size, 24rpx);
}
.t-swiper-nav__btn--prev,
.t-swiper-nav__btn--next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--td-swiper-nav-btn-size, 48rpx);
height: var(--td-swiper-nav-btn-size, 48rpx);
border-radius: 50%;
background: var(--td-swiper-nav-btn-bg-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
}
.t-swiper-nav__btn--prev::after,
.t-swiper-nav__btn--next::after {
position: absolute;
left: 50%;
top: 50%;
display: block;
content: '';
width: 12rpx;
height: 12rpx;
border-color: var(--td-swiper-nav-btn-color, var(--td-font-white-1, #ffffff));
border-style: solid;
}
.t-swiper-nav__btn--prev {
left: 30rpx;
}
.t-swiper-nav__btn--prev::after {
margin-left: 4rpx;
border-width: 2rpx 0 0 2rpx;
transform: translate(-50%, -50%) rotateZ(-45deg);
}
.t-swiper-nav__btn--next {
right: 30rpx;
}
.t-swiper-nav__btn--next::after {
margin-left: -4rpx;
border-width: 2rpx 2rpx 0 0;
transform: translate(-50%, -50%) rotateZ(45deg);
}

View File

@@ -6,13 +6,11 @@ export default class Swiper extends SuperComponent {
};
properties: import("./type").TdSwiperProps;
observers: {
current(v: any): void;
navigation(val: any): void;
navCurrent(v: any): void;
};
$nav: any;
relations: RelationsOptions;
data: {
_navigation: any;
prefix: string;
classPrefix: string;
};
@@ -20,8 +18,8 @@ export default class Swiper extends SuperComponent {
ready(): void;
};
methods: {
initNav(): void;
updateNav(index: any): void;
updateNav(currentValue: any): void;
onTap(e: any): void;
onChange(e: any): void;
onNavBtnChange(e: any): void;
doNavBtnChange(dir: any, source: any): void;

View File

@@ -9,11 +9,6 @@ import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-swiper`;
const defaultNavigation = {
type: 'dots',
minShowNum: 2,
showControls: false,
};
let Swiper = class Swiper extends SuperComponent {
constructor() {
super(...arguments);
@@ -29,58 +24,51 @@ let Swiper = class Swiper extends SuperComponent {
};
this.properties = props;
this.observers = {
current(v) {
navCurrent(v) {
this.updateNav(v);
},
navigation(val) {
this.setData({
_navigation: Object.assign(Object.assign({}, defaultNavigation), val),
});
},
};
this.$nav = null;
this.relations = {
'./swiper-nav': {
'../swiper-nav/swiper-nav': {
type: 'child',
},
};
this.data = {
_navigation: null,
prefix,
classPrefix: name,
};
this.lifetimes = {
ready() {
this.initNav();
this.updateNav(this.data.current);
const { current } = this.properties;
this.setData({ navCurrent: current });
},
};
this.methods = {
initNav() {
updateNav(currentValue) {
var _a;
const { _navigation } = this.data;
if (_navigation) {
this.$nav = this.selectComponent('#swiperNav');
}
else {
this.$nav = (_a = this.getRelationNodes('./swiper-nav')) === null || _a === void 0 ? void 0 : _a[0];
}
},
updateNav(index) {
var _a;
if (!this.$nav)
if (this.data.navigation)
return;
const $nav = (_a = this.getRelationNodes('./swiper-nav')) === null || _a === void 0 ? void 0 : _a[0];
if (!$nav)
return;
const { direction, paginationPosition, list } = this.properties;
(_a = this.$nav) === null || _a === void 0 ? void 0 : _a.onChange({
index,
$nav.setData({
current: currentValue,
total: list.length,
direction,
paginationPosition,
});
},
onTap(e) {
const { index } = e.currentTarget.dataset;
this.triggerEvent('click', { index });
},
onChange(e) {
const { current, source } = e.detail;
this.setData({ current });
this.setData({
navCurrent: current,
});
this.triggerEvent('change', { current, source });
},
onNavBtnChange(e) {

View File

@@ -1,7 +1,7 @@
{
"component": true,
"usingComponents": {
"t-swiper-nav": "./swiper-nav",
"t-swiper-nav": "../swiper-nav/swiper-nav",
"t-image": "../image/image"
}
}

View File

@@ -1,7 +1,9 @@
<wxs src="./index.wxs" module="this" />
<wxs src="../common/utils.wxs" module="_" />
<view class="{{prefix}}-class {{classPrefix}}" style="{{customStyle}}">
<import src="../common/template/image.wxml" />
<view class="{{prefix}}-class {{classPrefix}}" style="{{style}}">
<swiper
class="{{classPrefix}}-host"
autoplay="{{autoplay}}"
@@ -22,22 +24,25 @@
wx:for="{{list}}"
wx:key="index"
class="{{_.cls(classPrefix + '__item', [['preview', this.isPrev(current, index, list)], ['next', this.isNext(current, index, list)]])}}"
data-index="{{index}}"
bind:tap="onTap"
>
<t-image
class="{{classPrefix}}__image-host"
t-class="{{prefix}}-class-image {{this.isPrev(current, index, list) ? (prefix + '-class-prev-image') : ''}} {{this.isNext(current, index, list) ? (prefix + '-class-next-image') : ''}} {{classPrefix}}__image"
custom-style="height: {{_.addUnit(height)}}"
src="{{item}}"
<template
is="image"
data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: item, ...imageProps }}"
/>
</swiper-item>
</swiper>
<t-swiper-nav
wx:if="{{_navigation}}"
id="swiperNav"
wx:if="{{navigation}}"
t-class="{{prefix}}-class-nav"
type="{{_navigation.type}}"
minShowNum="{{_navigation.minShowNum}}"
showControls="{{_navigation.showControls}}"
type="{{navigation.type || 'dots'}}"
current="{{navCurrent}}"
total="{{list.length}}"
direction="{{direction}}"
pagination-position="{{paginationPosition}}"
min-show-num="{{navigation.minShowNum || 2}}"
show-controls="{{navigation.showControls || false}}"
bind:navBtnChange="onNavBtnChange"
/>
<slot name="nav" />

View File

@@ -1,3 +1,4 @@
import { SwiperNavProps } from '../swiper-nav/index';
export interface TdSwiperProps {
autoplay?: {
type: BooleanConstructor;
@@ -7,11 +8,7 @@ export interface TdSwiperProps {
type: NumberConstructor;
value?: number;
};
defaultCurrent?: {
type: NumberConstructor;
value?: number;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};
@@ -35,6 +32,10 @@ export interface TdSwiperProps {
type: null;
value?: string | number;
};
imageProps?: {
type: ObjectConstructor;
value?: object;
};
interval?: {
type: NumberConstructor;
value?: number;
@@ -48,8 +49,8 @@ export interface TdSwiperProps {
value?: boolean;
};
navigation?: {
type: ObjectConstructor;
value?: SwiperNavigation;
type: null;
value?: SwiperNavProps | boolean;
};
nextMargin?: {
type: null;
@@ -68,10 +69,3 @@ export interface TdSwiperProps {
value?: boolean;
};
}
export interface SwiperNavigation {
customStyle?: string;
minShowNum?: number;
showSlideBtn?: boolean;
type?: SwiperNavigationType;
}
export declare type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';