New Huajishe Check ChaoXing
This commit is contained in:
e2hang
@@ -0,0 +1,82 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Swiper 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
|
||||
autoplay | Boolean | true | \- | N
|
||||
current | Number | 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 | 192 | \- | N
|
||||
image-props | Object | - | `0.34.0` | N
|
||||
interval | Number | 5000 | \- | N
|
||||
list | Array | - | `0.32.0`。Typescript：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
|
||||
loop | Boolean | true | \- | 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
|
||||
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' \| 'nav'`<br/>
|
||||
click | `(index: number)` | `0.34.0`
|
||||
image-load | `(index: number)` | `1.1.4`
|
||||
### Swiper External Classes
|
||||
|
||||
className | Description
|
||||
-- | --
|
||||
t-class | \-
|
||||
t-class-image | \-
|
||||
t-class-nav | \-
|
||||
t-class-next-image | \-
|
||||
t-class-prev-image | \-
|
||||
|
||||
|
||||
### SwiperNav 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
|
||||
current | Number | 0 | `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
|
||||
### SwiperNav External Classes
|
||||
|
||||
className | Description
|
||||
-- | --
|
||||
t-class | \-
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The component provides the following CSS variables, which can be used to customize styles.
|
||||
Name | Default Value | Description
|
||||
-- | -- | --
|
||||
--td-swiper-item-padding | 0 | -
|
||||
--td-swiper-radius | @radius-large | -
|
||||
--td-swiper-nav-btn-bg-color | @font-gray-3 | -
|
||||
--td-swiper-nav-btn-color | @font-white-1 | -
|
||||
--td-swiper-nav-btn-size | 48rpx | -
|
||||
--td-swiper-nav-dot-active-color | @font-white-1 | -
|
||||
--td-swiper-nav-dot-color | @font-white-2 | -
|
||||
--td-swiper-nav-dot-size | 12rpx | -
|
||||
--td-swiper-nav-dots-bar-active-width | 40rpx | -
|
||||
--td-swiper-nav-fraction-bg-color | @font-gray-3 | -
|
||||
--td-swiper-nav-fraction-color | @font-white-1 | -
|
||||
--td-swiper-nav-fraction-font-size | 24rpx | -
|
||||
--td-swiper-nav-fraction-height | 48rpx | -
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
title: Swiper 轮播图
|
||||
description: 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。
|
||||
spline: message
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-90%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-swiper": "tdesign-miniprogram/swiper/swiper",
|
||||
"t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
|
||||
}
|
||||
```
|
||||
|
||||
### 组件说明
|
||||
|
||||
从 `0.32.0` 版本开始，依赖原生 `swiper` 组件实现，移除了 `swiper-item` 组件，新增了 `list` 属性；
|
||||
|
||||
## 代码演示
|
||||
|
||||
多种轮播样式，通过 `navigation` 设置导航样式，没有值则不显示，也可以自定义 `nav` 组件
|
||||
|
||||
<img src="https://tdesign.gtimg.com/miniprogram/readme/swiper.gif" width="375px" height="50%">
|
||||
|
||||
|
||||
<a href="https://developers.weixin.qq.com/s/nx7fJiml7QSM" 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>
|
||||
|
||||
### 组件类型
|
||||
|
||||
#### 点状（dots）轮播图
|
||||
|
||||
{{ base }}
|
||||
|
||||
#### 点条状（dots-bar）轮播图
|
||||
|
||||
{{ custom }}
|
||||
|
||||
#### 分式（fraction）导航器轮播图
|
||||
|
||||
{{ fraction }}
|
||||
|
||||
#### 切换按钮（controls）轮播图
|
||||
|
||||
{{ nav-btn }}
|
||||
|
||||
#### 卡片式（cards）轮播图
|
||||
|
||||
{{ cards }}
|
||||
|
||||
### 组件样式
|
||||
|
||||
#### 垂直模式
|
||||
|
||||
{{ vertical }}
|
||||
|
||||
## API
|
||||
|
||||
### Swiper Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | 样式 | N
|
||||
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
|
||||
autoplay | Boolean | true | 是否自动播放 | N
|
||||
current | Number | 0 | 当前轮播在哪一项（下标） | N
|
||||
direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
|
||||
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 | 192 | 轮播的高度；默认单位 `px` | N
|
||||
image-props | Object | - | `0.34.0`。透传至 Image 组件 | N
|
||||
interval | Number | 5000 | 轮播间隔时间 | N
|
||||
list | Array | - | `0.32.0`。图片列表。TS 类型：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
|
||||
loop | Boolean | true | 是否循环播放 | 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
|
||||
snap-to-edge | Boolean | false | `0.32.0`。当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 | N
|
||||
|
||||
### Swiper Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
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`。点击轮播项时触发
|
||||
image-load | `(index: number)` | `1.1.4`。图片加载时触发
|
||||
### Swiper External Classes
|
||||
|
||||
类名 | 描述
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-image | 当前图片样式类
|
||||
t-class-nav | 导航样式类
|
||||
t-class-next-image | 下一图片样式类
|
||||
t-class-prev-image | 上一图片样式类
|
||||
|
||||
|
||||
### SwiperNav Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | 样式 | N
|
||||
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
|
||||
current | Number | 0 | `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
|
||||
### SwiperNav External Classes
|
||||
|
||||
类名 | 描述
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
|
||||
### CSS Variables
|
||||
|
||||
组件提供了下列 CSS 变量，可用于自定义样式。
|
||||
名称 | 默认值 | 描述
|
||||
-- | -- | --
|
||||
--td-swiper-item-padding | 0 | -
|
||||
--td-swiper-radius | @radius-large | -
|
||||
--td-swiper-nav-btn-bg-color | @font-gray-3 | -
|
||||
--td-swiper-nav-btn-color | @font-white-1 | -
|
||||
--td-swiper-nav-btn-size | 48rpx | -
|
||||
--td-swiper-nav-dot-active-color | @font-white-1 | -
|
||||
--td-swiper-nav-dot-color | @font-white-2 | -
|
||||
--td-swiper-nav-dot-size | 12rpx | -
|
||||
--td-swiper-nav-dots-bar-active-width | 40rpx | -
|
||||
--td-swiper-nav-fraction-bg-color | @font-gray-3 | -
|
||||
--td-swiper-nav-fraction-color | @font-white-1 | -
|
||||
--td-swiper-nav-fraction-font-size | 24rpx | -
|
||||
--td-swiper-nav-fraction-height | 48rpx | -
|
||||
@@ -0,0 +1,25 @@
|
||||
function isPrev(current, index, list) {
|
||||
return (current - 1 + list.length) % list.length === index;
|
||||
}
|
||||
|
||||
function isNext(current, index, list) {
|
||||
return (current + 1 + list.length) % list.length === index;
|
||||
}
|
||||
|
||||
function getImageClass(prefix, current, index, list) {
|
||||
var arr = [prefix + '-swiper__image-host', 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;
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/swiper/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/swiper/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdSwiperProps } from './type';
|
||||
declare const props: TdSwiperProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,65 @@
|
||||
const props = {
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
displayMultipleItems: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 300,
|
||||
},
|
||||
easingFunction: {
|
||||
type: String,
|
||||
value: 'default',
|
||||
},
|
||||
height: {
|
||||
type: null,
|
||||
value: 192,
|
||||
},
|
||||
imageProps: {
|
||||
type: Object,
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
value: 5000,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
},
|
||||
loop: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
navigation: {
|
||||
type: null,
|
||||
value: true,
|
||||
},
|
||||
nextMargin: {
|
||||
type: null,
|
||||
value: 0,
|
||||
},
|
||||
paginationPosition: {
|
||||
type: String,
|
||||
value: 'bottom',
|
||||
},
|
||||
previousMargin: {
|
||||
type: null,
|
||||
value: 0,
|
||||
},
|
||||
snapToEdge: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
28
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/swiper/swiper.d.ts
vendored
Normal file
28
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/swiper/swiper.d.ts
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Swiper extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdSwiperProps;
|
||||
observers: {
|
||||
navCurrent(v: any): void;
|
||||
};
|
||||
$nav: any;
|
||||
relations: RelationsOptions;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
updateNav(currentValue: any): void;
|
||||
onTap(e: any): void;
|
||||
onChange(e: any): void;
|
||||
onNavBtnChange(e: any): void;
|
||||
doNavBtnChange(dir: any, source: any): void;
|
||||
onImageLoad(e: any): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
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';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-swiper`;
|
||||
let Swiper = class Swiper extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-nav`,
|
||||
`${prefix}-class-image`,
|
||||
`${prefix}-class-prev-image`,
|
||||
`${prefix}-class-next-image`,
|
||||
];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.properties = props;
|
||||
this.observers = {
|
||||
navCurrent(v) {
|
||||
this.updateNav(v);
|
||||
},
|
||||
};
|
||||
this.$nav = null;
|
||||
this.relations = {
|
||||
'../swiper-nav/swiper-nav': {
|
||||
type: 'child',
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
const { current } = this.properties;
|
||||
this.setData({ navCurrent: current });
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
updateNav(currentValue) {
|
||||
var _a;
|
||||
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;
|
||||
$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({
|
||||
navCurrent: current,
|
||||
});
|
||||
this.triggerEvent('change', { current, source });
|
||||
},
|
||||
onNavBtnChange(e) {
|
||||
const { dir, source } = e.detail;
|
||||
this.doNavBtnChange(dir, source);
|
||||
},
|
||||
doNavBtnChange(dir, source) {
|
||||
const { current, list, loop } = this.data;
|
||||
const count = list.length;
|
||||
let nextPos = dir === 'next' ? current + 1 : current - 1;
|
||||
if (loop) {
|
||||
nextPos = dir === 'next' ? (current + 1) % count : (current - 1 + count) % count;
|
||||
}
|
||||
else {
|
||||
nextPos = nextPos < 0 || nextPos >= count ? current : nextPos;
|
||||
}
|
||||
if (nextPos === current)
|
||||
return;
|
||||
this.setData({
|
||||
current: nextPos,
|
||||
});
|
||||
this.triggerEvent('change', { current: nextPos, source });
|
||||
},
|
||||
onImageLoad(e) {
|
||||
this.triggerEvent('image-load', { index: e.target.dataset.custom });
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Swiper = __decorate([
|
||||
wxComponent()
|
||||
], Swiper);
|
||||
export default Swiper;
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-swiper-nav": "../swiper-nav/swiper-nav",
|
||||
"t-image": "../image/image"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<wxs src="./index.wxs" module="_this" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<import src="../common/template/image.wxml" />
|
||||
|
||||
<view class="class {{prefix}}-class {{classPrefix}}" style="{{_._style([style, customStyle])}}">
|
||||
<swiper
|
||||
class="{{classPrefix}}-host"
|
||||
autoplay="{{autoplay}}"
|
||||
current="{{current}}"
|
||||
interval="{{interval}}"
|
||||
duration="{{duration}}"
|
||||
circular="{{loop}}"
|
||||
vertical="{{direction == 'vertical'}}"
|
||||
easing-function="{{easingFunction}}"
|
||||
previous-margin="{{previousMargin}}"
|
||||
next-margin="{{nextMargin}}"
|
||||
snap-to-edge="{{snapToEdge}}"
|
||||
display-multiple-items="{{displayMultipleItems}}"
|
||||
style="height: {{_.addUnit(height)}}"
|
||||
bindchange="onChange"
|
||||
>
|
||||
<swiper-item
|
||||
wx:for="{{list}}"
|
||||
wx:key="index"
|
||||
class="{{_.cls(classPrefix + '__item', [['preview', _this.isPrev(navCurrent, index, list)], ['next', _this.isNext(navCurrent, index, list)]])}}"
|
||||
data-index="{{index}}"
|
||||
bind:tap="onTap"
|
||||
aria-hidden="{{navCurrent !== index}}"
|
||||
aria-role="image"
|
||||
aria-label="{{_.isObject(item) ? item.ariaLabel : ''}}"
|
||||
>
|
||||
<template
|
||||
is="image"
|
||||
data="{{tClass: _this.getImageClass(prefix, navCurrent, index, list), style: 'height: ' + _.addUnit(height), src: _.isObject(item) ? item.value : item, mode: 'aspectFill', dataset: index, ...imageProps, bindload: 'onImageLoad' }}"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<t-swiper-nav
|
||||
wx:if="{{navigation}}"
|
||||
t-class="{{prefix}}-class-nav"
|
||||
type="{{navigation.type || 'dots'}}"
|
||||
current="{{navCurrent || 0}}"
|
||||
total="{{list.length || 0}}"
|
||||
direction="{{direction || 'horizontal'}}"
|
||||
pagination-position="{{paginationPosition || 'bottom'}}"
|
||||
min-show-num="{{navigation.minShowNum || 2}}"
|
||||
show-controls="{{navigation.showControls || false}}"
|
||||
bind:nav-btn-change="onNavBtnChange"
|
||||
/>
|
||||
<slot name="navigation" />
|
||||
<slot name="nav" />
|
||||
</view>
|
||||
@@ -0,0 +1,48 @@
|
||||
.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 {
|
||||
position: relative;
|
||||
}
|
||||
.t-swiper-host {
|
||||
border-radius: var(--td-swiper-radius, var(--td-radius-large, 18rpx));
|
||||
overflow: hidden;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.t-swiper__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: var(--td-swiper-item-padding, 0);
|
||||
}
|
||||
.t-swiper__image {
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.t-swiper__image-host {
|
||||
width: 100%;
|
||||
}
|
||||
71
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/swiper/type.d.ts
vendored
Normal file
71
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/swiper/type.d.ts
vendored
Normal file
@@ -0,0 +1,71 @@
|
||||
import { SwiperNavProps } from '../swiper-nav/index';
|
||||
export interface TdSwiperProps {
|
||||
autoplay?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
current?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
direction?: {
|
||||
type: StringConstructor;
|
||||
value?: 'horizontal' | 'vertical';
|
||||
};
|
||||
displayMultipleItems?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
duration?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
easingFunction?: {
|
||||
type: StringConstructor;
|
||||
value?: 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic';
|
||||
};
|
||||
height?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
imageProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: object;
|
||||
};
|
||||
interval?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
list?: {
|
||||
type: ArrayConstructor;
|
||||
value?: string[] | SwiperList[];
|
||||
};
|
||||
loop?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
navigation?: {
|
||||
type: null;
|
||||
value?: SwiperNavProps | boolean;
|
||||
};
|
||||
nextMargin?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
paginationPosition?: {
|
||||
type: StringConstructor;
|
||||
value?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
|
||||
};
|
||||
previousMargin?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
snapToEdge?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export interface SwiperList {
|
||||
value: string;
|
||||
ariaLabel: string;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user