白色主题
This commit is contained in:
@@ -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 | options:horizontal/vertical | N
|
||||
display-multiple-items | Number | 1 | `0.32.0` | N
|
||||
duration | Number | 300 | \- | N
|
||||
easing-function | String | default | `0.32.0`。options:default/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 | options:top-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`。options:horizontal/vertical | N
|
||||
min-show-num | Number | 2 | \- | N
|
||||
pagination-position | String | bottom | `0.34.0`。options: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 | 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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 {};
|
||||
@@ -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;
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-swiper-nav": "./swiper-nav",
|
||||
"t-swiper-nav": "../swiper-nav/swiper-nav",
|
||||
"t-image": "../image/image"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user