project init

components/swiper/README.md

@@ -0,0 +1,92 @@
+---
+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-item": "tdesign-miniprogram/swiper/swiper-item",
+  "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav",
+}
+```
+
+### 组件说明
+
+swiper 必须配合 swiper-item 使用，swiper-item 作为轮播条目组件，宽高默认 100%。
+
+
+### 主题定制
+CSS 变量名|说明
+--|--
+--td-swiper-nav-dot-color | 点状导航器颜色
+--td-swiper-nav-dot-active-color | 点状导航器激活态颜色
+--td-swiper-nav-fraction-color | 分式导航器颜色
+--td-swiper-nav-fraction-bg-color | 分式导航器背景颜色
+--td-swiper-nav-btn-color | 按钮导航器颜色
+--td-swiper-nav-btn-bg-color | 按钮导航器背景颜色
+
+
+## 代码演示
+
+多种轮播样式，通过 `navigation` 设置导航样式，没有值则不显示，也可以自定义 `nav` 组件
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/swiper.gif" width="375px" height="50%">
+
+
+### 点状(dots)轮播图
+{{ base }}
+
+### 分式(fraction)导航器轮播图
+
+{{ fraction }}
+
+### 插槽自定义导航器轮播图
+
+{{ custom }}
+
+### 按钮导航器轮播图
+
+{{ nav-btn }}
+
+### 轮播图垂直样式
+
+{{ vertical }}
+
+## API
+### Swiper Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+animation | String | slide | 轮播切换动画效果类型。可选项：slide | N
+autoplay | Boolean | true | 是否自动播放 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+default-current | Number | undefined | 当前轮播在哪一项（下标）。非受控属性 | N
+direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
+duration | Number | 300 | 滑动动画时长 | N
+height | Number | - | 当使用垂直方向滚动时的高度 | N
+interval | Number | 5000 | 轮播间隔时间 | N
+loop | Boolean | true | 【开发中】是否循环播放 | N
+navigation | Object / Slot | - | 导航器全部配置 | N
+pagination-position | String | bottom-right | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | 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' | ''`<br/>
+
+### SwiperNavigation
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+min-show-num | Number | - | 小于这个数字不会显示导航器 | N
+show-slide-btn | Boolean | - | 表示是否显示两侧的滑动控制按钮 | 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

components/swiper/common/constants.d.ts

@@ -0,0 +1,11 @@
+declare const DIRECTION: {
+    HOR: string;
+    VER: string;
+};
+declare const enum NavTypes {
+    none = "",
+    dots = "dots",
+    dotsBar = "dots-bar",
+    fraction = "fraction"
+}
+export { DIRECTION, NavTypes };

components/swiper/common/constants.js

@@ -0,0 +1,5 @@
+const DIRECTION = {
+    HOR: 'horizontal',
+    VER: 'vertical',
+};
+export { DIRECTION };

components/swiper/props.d.ts

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

components/swiper/props.js

@@ -0,0 +1,45 @@
+const props = {
+    animation: {
+        type: String,
+        value: 'slide',
+    },
+    autoplay: {
+        type: Boolean,
+        value: true,
+    },
+    current: {
+        type: Number,
+        value: null,
+    },
+    defaultCurrent: {
+        type: Number,
+        value: 0,
+    },
+    direction: {
+        type: String,
+        value: 'horizontal',
+    },
+    duration: {
+        type: Number,
+        value: 300,
+    },
+    height: {
+        type: Number,
+    },
+    interval: {
+        type: Number,
+        value: 5000,
+    },
+    loop: {
+        type: Boolean,
+        value: true,
+    },
+    navigation: {
+        type: Object,
+    },
+    paginationPosition: {
+        type: String,
+        value: 'bottom',
+    },
+};
+export default props;

components/swiper/swiper-item.d.ts

@@ -0,0 +1,10 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class SwiperItem extends SuperComponent {
+    relations: RelationsOptions;
+    data: {
+        index: number;
+        classPrefix: string;
+        translate: string;
+    };
+    setIndex(index: number, direction: string): void;
+}

components/swiper/swiper-item.js

@@ -0,0 +1,37 @@
+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 { DIRECTION } from './common/constants';
+import config from '../common/config';
+const { prefix } = config;
+let SwiperItem = class SwiperItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.relations = {
+            './swiper': {
+                type: 'parent',
+            },
+        };
+        this.data = {
+            index: 0,
+            classPrefix: `${prefix}-swiper-item`,
+            translate: '',
+        };
+    }
+    setIndex(index, direction) {
+        const translate = direction === DIRECTION.HOR ? `translate(${100 * index}%, 0px)` : `translate(0px, ${100 * index}%)`;
+        this.setData({
+            index,
+            direction,
+            translate,
+        });
+    }
+};
+SwiperItem = __decorate([
+    wxComponent()
+], SwiperItem);
+export default SwiperItem;

components/swiper/swiper-item.json

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

components/swiper/swiper-item.wxml

@@ -0,0 +1,3 @@
+<view class="{{classPrefix}}" style="transform: {{translate}} translateZ(0px);">
+  <slot />
+</view>

components/swiper/swiper-item.wxss

@@ -0,0 +1,33 @@
+.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-item {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}

components/swiper/swiper-nav.d.ts

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

components/swiper/swiper-nav.js

@@ -0,0 +1,63 @@
+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 { DIRECTION } from './common/constants';
+const { prefix } = config;
+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,
+            },
+            hasNavBtn: {
+                type: Boolean,
+                value: false,
+            },
+        };
+        this.relations = {
+            './swiper': {
+                type: 'parent',
+            },
+        };
+        this.data = {
+            index: 0,
+            total: 0,
+            direction: DIRECTION.HOR,
+            prefix,
+            classPrefix: `${prefix}-swiper-nav`,
+        };
+    }
+    ready() {
+        var _a;
+        this.$swiper = (_a = this.getRelationNodes('./swiper')) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    onChange(opt) {
+        this.setData(Object.assign({}, opt));
+    }
+    nav(e) {
+        var _a, _b;
+        const { dir } = e.target.dataset;
+        const opt = { source: 'nav', cycle: true };
+        this.triggerEvent('navBtnChange', Object.assign(Object.assign({}, opt), { dir }));
+        if (this.$swiper) {
+            (_a = this.$swiper) === null || _a === void 0 ? void 0 : _a.pause();
+            (_b = this.$swiper) === null || _b === void 0 ? void 0 : _b[dir](opt);
+        }
+    }
+};
+SwiperNav = __decorate([
+    wxComponent()
+], SwiperNav);
+export default SwiperNav;

components/swiper/swiper-nav.json

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

components/swiper/swiper-nav.wxml

@@ -0,0 +1,18 @@
+<view
+  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{direction}} {{classPrefix}}--position-{{paginationPosition}}"
+  wx:if="{{total >= minShowNum}}"
+>
+  <view wx:if="{{ type === 'dots' || type === 'dots-bar'}}" class="{{classPrefix}}__{{type}}">
+    <view
+      wx:for="{{total}}"
+      wx:for-index="idx"
+      wx:key="idx"
+      class="{{classPrefix}}__{{type}}-item {{index === idx ? prefix + '-is-active' : ''}}"
+    />
+  </view>
+  <view wx:if="{{ type === 'fraction'}}" class="{{classPrefix}}__fraction"> {{index+1}}/{{total}} </view>
+  <view wx:if="{{hasNavBtn}}" 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>

components/swiper/swiper-nav.wxss

@@ -0,0 +1,178 @@
+.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);
+}
+page {
+  --td-swiper-nav-dot-color: rgba(255, 255, 255, 0.55);
+  --td-swiper-nav-dot-active-color: #fff;
+  --td-swiper-nav-fraction-color: #fff;
+  --td-swiper-nav-fraction-bg-color: rgba(0, 0, 0, 0.4);
+  --td-swiper-nav-btn-color: #fff;
+  --td-swiper-nav-btn-bg-color: rgba(0, 0, 0, 0.4);
+}
+.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: 12rpx;
+  height: 12rpx;
+  background: var(--td-swiper-nav-dot-color, rgba(255, 255, 255, 0.55));
+  border-radius: 50%;
+  margin: 0 10rpx;
+  transition: all 0.4s ease-in;
+}
+.t-swiper-nav__dots-item.t-is-active,
+.t-swiper-nav__dots-bar-item.t-is-active {
+  background-color: var(--td-swiper-nav-dot-active-color, #fff);
+}
+.t-swiper-nav__dots-bar-item.t-is-active {
+  width: 40rpx;
+  border-radius: 6rpx;
+  background-color: var(--td-swiper-nav-dot-active-color, #fff);
+}
+.t-swiper-nav--position-left .t-swiper-nav__dots,
+.t-swiper-nav--position-left .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-left .t-swiper-nav__fraction {
+  position: absolute;
+  left: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-swiper-nav--position-right .t-swiper-nav__dots,
+.t-swiper-nav--position-right .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-right .t-swiper-nav__fraction {
+  position: absolute;
+  right: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-swiper-nav--position-top-left .t-swiper-nav__dots,
+.t-swiper-nav--position-top-left .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-top-left .t-swiper-nav__fraction {
+  position: absolute;
+  top: 24rpx;
+  left: 24rpx;
+}
+.t-swiper-nav--position-top .t-swiper-nav__dots,
+.t-swiper-nav--position-top .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-top .t-swiper-nav__fraction {
+  position: absolute;
+  left: 50%;
+  top: 24rpx;
+  transform: translateX(-50%);
+}
+.t-swiper-nav--position-top-right .t-swiper-nav__dots,
+.t-swiper-nav--position-top-right .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-top-right .t-swiper-nav__fraction {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+}
+.t-swiper-nav--position-bottom-left .t-swiper-nav__dots,
+.t-swiper-nav--position-bottom-left .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-bottom-left .t-swiper-nav__fraction {
+  position: absolute;
+  left: 24rpx;
+  bottom: 24rpx;
+}
+.t-swiper-nav--position-bottom .t-swiper-nav__dots,
+.t-swiper-nav--position-bottom .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-bottom .t-swiper-nav__fraction {
+  position: absolute;
+  left: 50%;
+  bottom: 24rpx;
+  transform: translateX(-50%);
+}
+.t-swiper-nav--position-bottom-right .t-swiper-nav__dots,
+.t-swiper-nav--position-bottom-right .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-bottom-right .t-swiper-nav__fraction {
+  position: absolute;
+  right: 24rpx;
+  bottom: 24rpx;
+}
+.t-swiper-nav--vertical .t-swiper-nav__dots,
+.t-swiper-nav--vertical .t-swiper-nav__dots-bar {
+  flex-direction: column;
+}
+.t-swiper-nav--vertical .t-swiper-nav__dots-item,
+.t-swiper-nav--vertical .t-swiper-nav__dots-bar-item {
+  margin: 10rpx 0;
+}
+.t-swiper-nav--vertical .t-swiper-nav__dots-bar-item.t-is-active {
+  width: 12rpx;
+  height: 40rpx;
+}
+.t-swiper-nav__fraction {
+  width: 40rpx;
+  padding: 0 20rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  border-radius: 20rpx;
+  background: var(--td-swiper-nav-fraction-bg-color, rgba(0, 0, 0, 0.4));
+  color: var(--td-swiper-nav-fraction-color, #fff);
+  font-size: 24rpx;
+}
+.t-swiper-nav__btn--prev,
+.t-swiper-nav__btn--next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background: var(--td-swiper-nav-btn-bg-color, 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, #fff);
+  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);
+}

components/swiper/swiper.d.ts

@@ -0,0 +1,71 @@
+import { SuperComponent, ControlInstance, RelationsOptions } from '../common/src/index';
+interface SwitchOpt {
+    cycle?: boolean;
+    source: 'autoplay' | 'touch' | 'nav';
+}
+export default class Swiper extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdSwiperProps;
+    observers: {
+        navigation(val: any): void;
+        current(val: any): void;
+        autoplay(val: any): void;
+        interval(val: any): void;
+        direction(val: any): void;
+    };
+    children: any;
+    $nav: any;
+    timer: any;
+    updateTimer: any;
+    control: ControlInstance;
+    relations: RelationsOptions;
+    data: {
+        _current: number;
+        _navigation: any;
+        _width: number;
+        _height: number;
+        offsetX: number;
+        offsetY: number;
+        total: number;
+        easings: {
+            linear: string;
+            easeInCubic: string;
+            easeOutCubic: string;
+            easeInOutCubic: string;
+        };
+        inited: boolean;
+        currentInited: boolean;
+        prefix: string;
+        classPrefix: string;
+    };
+    attached(): void;
+    detached(): void;
+    ready(): void;
+    methods: {
+        init(): void;
+    };
+    initItem(): void;
+    initNav(): void;
+    inited(): void;
+    initCurrent(): void;
+    play(): void;
+    replay(): void;
+    pause(): void;
+    goto(index: number, source: string): void;
+    update(index: number, finish?: any): void;
+    updateNav(index: any): void;
+    calcOffset(index: number): {
+        offsetX: number;
+        offsetY?: undefined;
+    } | {
+        offsetY: number;
+        offsetX?: undefined;
+    };
+    next(opt: SwitchOpt): void;
+    prev(opt: SwitchOpt): void;
+    onSwiperNavBtnChange(e: any): void;
+}
+export {};

components/swiper/swiper.js

@@ -0,0 +1,280 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { SuperComponent, wxComponent, useControl } from '../common/src/index';
+import config from '../common/config';
+import { DIRECTION } from './common/constants';
+import props from './props';
+const { prefix } = config;
+const easings = {
+    linear: 'linear',
+    easeInCubic: 'cubic-bezier(0.32, 0, 0.67, 0)',
+    easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',
+    easeInOutCubic: 'cubic-bezier(0.65, 0, 0.35, 1)',
+};
+const defaultNavigation = {
+    type: "dots",
+    minShowNum: 2,
+    hasNavBtn: false,
+};
+let Swiper = class Swiper extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.observers = {
+            navigation(val) {
+                this.setData({
+                    _navigation: Object.assign(Object.assign({}, defaultNavigation), val),
+                });
+            },
+            current(val) {
+                this.update(+val);
+            },
+            autoplay(val) {
+                if (val) {
+                    this.play();
+                }
+                else {
+                    this.pause();
+                }
+            },
+            interval(val) {
+                if (this._old_interval && this._old_interval !== val) {
+                    this.replay();
+                }
+                this._old_interval = val;
+            },
+            direction(val) {
+                if (this._old_direction && this._old_direction !== val) {
+                    this.initItem();
+                }
+                this._old_direction = val;
+            },
+        };
+        this.children = null;
+        this.$nav = null;
+        this.timer = null;
+        this.updateTimer = null;
+        this.control = null;
+        this.relations = {
+            './swiper-item': {
+                type: 'child',
+                linked: function () {
+                    clearTimeout(this.updateTimer);
+                    this.updateTimer = setTimeout(() => {
+                        this.initItem();
+                        this.updateNav(this.control.get());
+                    });
+                },
+                unlinked: function () {
+                    this.initItem();
+                    this.update(0);
+                },
+            },
+            './swiper-nav': {
+                type: 'child',
+            },
+        };
+        this.data = {
+            _current: 0,
+            _navigation: null,
+            _width: 0,
+            _height: 0,
+            offsetX: 0,
+            offsetY: 0,
+            total: 0,
+            easings,
+            inited: false,
+            currentInited: false,
+            prefix,
+            classPrefix: `${prefix}-swiper`,
+        };
+        this.methods = {
+            init() {
+                if (this.hasInited)
+                    return;
+                wx.createSelectorQuery()
+                    .in(this)
+                    .select('#swiper')
+                    .boundingClientRect((rect) => {
+                    if (rect.width === 0)
+                        return;
+                    this.hasInited = true;
+                    this.setData({
+                        _width: rect.width,
+                        _height: rect.height,
+                    });
+                    this.initItem();
+                    this.initNav();
+                    this.initCurrent();
+                })
+                    .exec();
+            },
+        };
+    }
+    attached() {
+        this.control = useControl.call(this, {
+            valueKey: 'current',
+            strict: false,
+        });
+    }
+    detached() {
+        this.pause();
+    }
+    ready() {
+        this.init();
+    }
+    initItem() {
+        const { direction } = this.properties;
+        this.children = this.getRelationNodes('./swiper-item');
+        this.children.forEach((item, index) => {
+            item.setIndex(index, direction);
+        });
+        this.setData({
+            total: this.children.length,
+        });
+    }
+    initNav() {
+        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];
+        }
+    }
+    inited() {
+        this.updateNav(this.control.get());
+        this.setData({
+            inited: true,
+        });
+    }
+    initCurrent() {
+        let index = +this.control.initValue;
+        index = Math.min(index, this.children.length - 1);
+        index = Math.max(index, 0);
+        this.control.set(index, Object.assign({ currentInited: true, inited: index === 0 }, this.calcOffset(index)));
+    }
+    play() {
+        this.pause();
+        const { interval } = this.properties;
+        this.timer = setInterval(() => {
+            const { inited } = this.data;
+            if (!inited)
+                return;
+            this.next({ cycle: true, source: 'autoplay' });
+        }, interval);
+    }
+    replay() {
+        const { autoplay } = this.properties;
+        autoplay && this.play();
+    }
+    pause() {
+        this.timer && clearInterval(this.timer);
+        this.timer = null;
+    }
+    goto(index, source) {
+        if (this.control.get() === index) {
+            this.update(index);
+            return;
+        }
+        this.control.change(index, {
+            current: index,
+            source,
+        }, () => {
+            this.update(index);
+        });
+    }
+    update(index, finish) {
+        if (!this.children)
+            return;
+        const len = this.children.length;
+        let fixIndex = +index;
+        if (Number.isNaN(fixIndex))
+            return;
+        if (fixIndex <= 0) {
+            fixIndex = 0;
+        }
+        else if (fixIndex > len - 1) {
+            fixIndex = len - 1;
+        }
+        this.updateNav(fixIndex);
+        this.control.set(fixIndex, this.calcOffset(fixIndex), finish);
+    }
+    updateNav(index) {
+        var _a;
+        if (!this.$nav)
+            return;
+        const { direction, paginationPosition } = this.properties;
+        (_a = this.$nav) === null || _a === void 0 ? void 0 : _a.onChange({
+            index,
+            total: this.children.length,
+            direction,
+            paginationPosition,
+        });
+    }
+    calcOffset(index) {
+        const { direction } = this.properties;
+        const { _width, _height } = this.data;
+        if (direction === DIRECTION.HOR) {
+            return {
+                offsetX: -index * _width,
+            };
+        }
+        return {
+            offsetY: -index * _height,
+        };
+    }
+    next(opt) {
+        const innerVal = this.control.get();
+        const len = this.children.length;
+        let nextIndex = innerVal;
+        if (opt.cycle && innerVal === len - 1) {
+            nextIndex = 0;
+        }
+        else if (len - 1 > innerVal) {
+            nextIndex += 1;
+        }
+        this.goto(nextIndex, opt.source);
+    }
+    prev(opt) {
+        const innerVal = this.control.get();
+        const len = this.children.length;
+        let nextIndex = innerVal;
+        if (opt.cycle && innerVal === 0) {
+            nextIndex = len - 1;
+        }
+        else if (nextIndex > 0) {
+            nextIndex -= 1;
+        }
+        this.goto(nextIndex, opt.source);
+    }
+    onSwiperNavBtnChange(e) {
+        const _a = e.detail, { dir } = _a, rest = __rest(_a, ["dir"]);
+        this.pause();
+        this === null || this === void 0 ? void 0 : this[dir](rest);
+    }
+};
+Swiper = __decorate([
+    wxComponent()
+], Swiper);
+export default Swiper;

components/swiper/swiper.json

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

components/swiper/swiper.wxml

@@ -0,0 +1,43 @@
+<wxs src="./swiper.wxs" module="swiper" />
+<!-- 支持传入height指定容器高度，单位rpx -->
+<view
+  id="swiper"
+  class="{{prefix}}-class {{classPrefix}}"
+  style="{{height?'height:'+height+'rpx':''}}"
+>
+  <view
+    id="swiperContainer"
+    class="{{classPrefix}}__container {{inited? '{{prefix}}-in-animation' : '{{prefix}}-is-hidden'}}"
+    style="transition-duration: {{duration/1000}}s;transition-timing-function:{{easings.linear}};"
+    bindtouchstart="{{swiper.startDrag}}"
+    capture-catch:touchmove="{{swiper.onDrag}}"
+    bindtouchend="{{swiper.endDrag}}"
+    bindtouchcancel="{{swiper.endDrag}}"
+    offsetX="{{offsetX}}"
+    offsetY="{{offsetY}}"
+    width="{{_width}}"
+    height="{{_height}}"
+    direction="{{direction}}"
+    total="{{total}}"
+    currentInited="{{currentInited}}"
+    change:offsetX="{{swiper.changeOffsetX}}"
+    change:offsetY="{{swiper.changeOffsetY}}"
+    change:width="{{swiper.changeWidth}}"
+    change:height="{{swiper.changeHeight}}"
+    change:direction="{{swiper.changeDirection}}"
+    change:total="{{swiper.changeTotal}}"
+    change:currentInited="{{swiper.changeCurrentInited}}"
+  >
+    <slot />
+  </view>
+  <t-swiper-nav
+    id="swiperNav"
+    wx:if="{{_navigation}}"
+    type="{{_navigation.type}}"
+    minShowNum="{{_navigation.minShowNum}}"
+    hasNavBtn="{{_navigation.hasNavBtn}}"
+    bind:navBtnChange="onSwiperNavBtnChange"
+  />
+  <!-- 同时支持插槽组合 -->
+  <slot name="nav" />
+</view>

components/swiper/swiper.wxs

@@ -0,0 +1,184 @@
+/**
+ * 轮播触屏脚本
+ */
+// 轮播容器ID
+var containerId = '#swiperContainer';
+// 移动阈值
+var moveThreshold = 0.3;
+// 轮播方向
+var DIRECTION = {
+  // 水平
+  HOR: 'horizontal',
+  // 垂直
+  VER: 'vertical',
+};
+
+function updateMoveInfo(state, event) {
+  var touchPoint = event.touches[0];
+  state.moveX = touchPoint.clientX - state.startX;
+  state.moveY = touchPoint.clientY - state.startY;
+}
+
+function moveContainer(state, reset) {
+  if (state.direction === DIRECTION.HOR) {
+    var offset = reset ? state.offsetX : state.offsetX + state.moveX;
+    // console.log(DIRECTION.HOR, state.moveX);
+    if (offset > 0) {
+      offset = Math.min(state.width * moveThreshold, offset);
+    } else {
+      offset = Math.max(-state.width * (state.total - (1 - moveThreshold)), offset);
+    }
+    setOffset(state, offset, 0, !reset);
+  } else {
+    var offset = reset ? state.offsetY : state.offsetY + state.moveY;
+    // console.log(DIRECTION.VER, state.moveY);
+    if (offset > 0) {
+      offset = Math.min(state.height * moveThreshold, offset);
+    } else {
+      offset = Math.max(-state.height * (state.total - (1 - moveThreshold)), offset);
+    }
+    setOffset(state, 0, offset, !reset);
+  }
+}
+
+function setOffset(state, offsetX, offsetY, disAni) {
+  var transform = 'translate3d(' + (offsetX || 0) + 'px, ' + (offsetY || 0) + 'px, 0)';
+  var styles = {
+    // '-webkit-transform': transform,
+    transform: transform,
+  };
+  if (disAni) {
+    styles['transition'] = 'none';
+  }
+  state.container.setStyle(styles);
+}
+
+function initContainer(ownerInstance) {
+  var state = ownerInstance.getState();
+  state.container = state.container || ownerInstance.selectComponent(containerId);
+}
+
+function startDrag(event, ownerInstance) {
+  initContainer(ownerInstance);
+  var state = ownerInstance.getState();
+  var touchPoint = event.touches[0];
+  state.moveX = 0;
+  state.moveY = 0;
+  state.startX = touchPoint.clientX;
+  state.startY = touchPoint.clientY;
+  ownerInstance.callMethod('pause');
+}
+
+function onDrag(event, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.dragging = true;
+  updateMoveInfo(state, event);
+  moveContainer(state);
+}
+
+function endDrag(event, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.dragging = false;
+  ownerInstance.callMethod('replay');
+  var pageDir = '';
+  if (state.direction === DIRECTION.HOR) {
+    pageDir = getPageDir(state.moveX, state.width);
+  } else {
+    pageDir = getPageDir(state.moveY, state.height);
+  }
+  if (pageDir) {
+    ownerInstance.callMethod(pageDir, { source: 'touch' });
+    return;
+  }
+  // 重置
+  moveContainer(state, true);
+}
+/**
+ * 返回分页操作的方向
+ * @param move 移动距离
+ * @param size 容器尺寸
+ * @returns
+ */
+function getPageDir(move, size) {
+  if (move > 0) {
+    // 右滑超过阈值
+    if (move > size * moveThreshold) {
+      return 'prev';
+    }
+  } else {
+    // 左滑超过阈值
+    if (-move > size * moveThreshold) {
+      return 'next';
+    }
+  }
+}
+
+function changeOffsetByDirection(direction, newVal, ownerInstance) {
+  initContainer(ownerInstance);
+  var state = ownerInstance.getState();
+  if (state.direction !== direction) return;
+  var needInit = !state.inited && state.currentInited;
+  if (direction === DIRECTION.HOR) {
+    setOffset(state, state.offsetX, 0, needInit);
+  } else {
+    setOffset(state, 0, state.offsetY, needInit);
+  }
+
+  if (needInit) {
+    state.inited = true;
+    ownerInstance.callMethod('inited');
+  }
+}
+
+function changeOffsetX(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.offsetX = newVal;
+  changeOffsetByDirection(DIRECTION.HOR, newVal, ownerInstance);
+}
+
+function changeOffsetY(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.offsetY = newVal;
+  changeOffsetByDirection(DIRECTION.VER, newVal, ownerInstance);
+}
+function changeWidth(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.width = newVal;
+}
+
+function changeHeight(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.height = newVal;
+}
+
+function changeDirection(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.direction = newVal;
+  if (oldVal && newVal !== oldVal) {
+    state.inited = false;
+    changeOffsetByDirection(newVal, state.offsetY, ownerInstance);
+  }
+}
+
+function changeTotal(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.total = newVal;
+}
+
+function changeCurrentInited(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.currentInited = newVal;
+}
+
+module.exports = {
+  startDrag: startDrag,
+  onDrag: onDrag,
+  endDrag: endDrag,
+  changeOffsetX: changeOffsetX,
+  changeOffsetY: changeOffsetY,
+  changeWidth: changeWidth,
+  changeHeight: changeHeight,
+  changeDirection: changeDirection,
+  changeTotal: changeTotal,
+  changeCurrentInited: changeCurrentInited,
+};

components/swiper/swiper.wxss

@@ -0,0 +1,44 @@
+.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;
+  overflow: hidden;
+  height: 300rpx;
+}
+.t-swiper__container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.t-swiper__container.t-in-animation {
+  transition-property: transform;
+}
+.t-swiper__container.t-is-hidden {
+  visibility: hidden;
+  transition-property: none;
+}

components/swiper/type.d.ts

@@ -0,0 +1,52 @@
+export interface TdSwiperProps {
+    animation?: {
+        type: StringConstructor;
+        value?: 'slide';
+    };
+    autoplay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    current?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    defaultCurrent?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    direction?: {
+        type: StringConstructor;
+        value?: 'horizontal' | 'vertical';
+    };
+    duration?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    height?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    interval?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    loop?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    navigation?: {
+        type: ObjectConstructor;
+        value?: SwiperNavigation;
+    };
+    paginationPosition?: {
+        type: StringConstructor;
+        value?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
+    };
+}
+export interface SwiperNavigation {
+    minShowNum?: number;
+    showSlideBtn?: boolean;
+    type?: SwiperNavigationType;
+}
+export declare type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';

components/swiper/type.js

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