project init & fix ui

miniprogram_npm/tdesign-miniprogram/swiper/README.en-US.md

@@ -0,0 +1,39 @@
+:: BASE_DOC ::
+
+## API
+### Swiper Props
+
+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
+interval | Number | 5000 | \- | N
+list | Array | - | `0.32.0`。Typescript：`string[]` | N
+loop | Boolean | true | \- | N
+navigation | Object / Slot | - | \- | 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
+
+### 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/>
+
+### SwiperNavigation
+
+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

miniprogram_npm/tdesign-miniprogram/swiper/README.md

@@ -0,0 +1,93 @@
+---
+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/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%">
+
+### 组件类型
+
+#### 点状（dots）轮播图
+
+{{ base }}
+
+#### 点条状（dots-bar）轮播图
+
+{{ custom }}
+
+#### 分式（fraction）导航器轮播图
+
+{{ fraction }}
+
+#### 切换按钮（controls）轮播图
+
+{{ nav-btn }}
+
+#### 卡片式（cards）轮播图
+
+{{ cards }}
+
+### 组件样式
+
+#### 垂直模式
+
+{{ vertical }}
+
+## API
+### Swiper Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+autoplay | Boolean | true | 是否自动播放 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+custom-style | String | - | `0.25.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 | '192px' | 轮播的高度；默认单位 `px` | N
+interval | Number | 5000 | 轮播间隔时间 | N
+list | Array | - | `0.32.0`。图片列表。TS 类型：`string[]` | N
+loop | Boolean | true | 是否循环播放 | N
+navigation | Object / Slot | - | 导航器全部配置 | 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/>
+
+### SwiperNavigation
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+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

miniprogram_npm/tdesign-miniprogram/swiper/index.wxs

@@ -0,0 +1,7 @@
+module.exports.isPrev = function(current, index, list) {
+  return (current - 1 + list.length) % list.length === index;
+}
+
+module.exports.isNext = function(current, index, list) {
+  return (current + 1 + list.length) % list.length === index;
+}

miniprogram_npm/tdesign-miniprogram/swiper/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/swiper/props.js

@@ -0,0 +1,69 @@
+const props = {
+    autoplay: {
+        type: Boolean,
+        value: true,
+    },
+    current: {
+        type: Number,
+        value: null,
+    },
+    defaultCurrent: {
+        type: Number,
+        value: 0,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    direction: {
+        type: String,
+        value: 'horizontal',
+    },
+    displayMultipleItems: {
+        type: Number,
+        value: 1,
+    },
+    duration: {
+        type: Number,
+        value: 300,
+    },
+    easingFunction: {
+        type: String,
+        value: 'default',
+    },
+    height: {
+        type: null,
+        value: '192px',
+    },
+    interval: {
+        type: Number,
+        value: 5000,
+    },
+    list: {
+        type: Array,
+    },
+    loop: {
+        type: Boolean,
+        value: true,
+    },
+    navigation: {
+        type: Object,
+    },
+    nextMargin: {
+        type: null,
+        value: 0,
+    },
+    paginationPosition: {
+        type: String,
+        value: 'bottom',
+    },
+    previousMargin: {
+        type: null,
+        value: 0,
+    },
+    snapToEdge: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/swiper/swiper-nav.d.ts

@@ -0,0 +1,37 @@
+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 {};

miniprogram_npm/tdesign-miniprogram/swiper/swiper-nav.js

@@ -0,0 +1,60 @@
+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;

miniprogram_npm/tdesign-miniprogram/swiper/swiper-nav.json

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

miniprogram_npm/tdesign-miniprogram/swiper/swiper-nav.wxml

@@ -0,0 +1,21 @@
+<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>

miniprogram_npm/tdesign-miniprogram/swiper/swiper-nav.wxss

@@ -0,0 +1,152 @@
+.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);
+}

miniprogram_npm/tdesign-miniprogram/swiper/swiper.d.ts

@@ -0,0 +1,29 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Swiper extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdSwiperProps;
+    observers: {
+        current(v: any): void;
+        navigation(val: any): void;
+    };
+    $nav: any;
+    relations: RelationsOptions;
+    data: {
+        _navigation: any;
+        prefix: string;
+        classPrefix: string;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+    methods: {
+        initNav(): void;
+        updateNav(index: any): void;
+        onChange(e: any): void;
+        onNavBtnChange(e: any): void;
+        doNavBtnChange(dir: any, source: any): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/swiper/swiper.js

@@ -0,0 +1,113 @@
+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`;
+const defaultNavigation = {
+    type: 'dots',
+    minShowNum: 2,
+    showControls: false,
+};
+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 = {
+            current(v) {
+                this.updateNav(v);
+            },
+            navigation(val) {
+                this.setData({
+                    _navigation: Object.assign(Object.assign({}, defaultNavigation), val),
+                });
+            },
+        };
+        this.$nav = null;
+        this.relations = {
+            './swiper-nav': {
+                type: 'child',
+            },
+        };
+        this.data = {
+            _navigation: null,
+            prefix,
+            classPrefix: name,
+        };
+        this.lifetimes = {
+            ready() {
+                this.initNav();
+                this.updateNav(this.data.current);
+            },
+        };
+        this.methods = {
+            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];
+                }
+            },
+            updateNav(index) {
+                var _a;
+                if (!this.$nav)
+                    return;
+                const { direction, paginationPosition, list } = this.properties;
+                (_a = this.$nav) === null || _a === void 0 ? void 0 : _a.onChange({
+                    index,
+                    total: list.length,
+                    direction,
+                    paginationPosition,
+                });
+            },
+            onChange(e) {
+                const { current, source } = e.detail;
+                this.setData({ 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 });
+            },
+        };
+    }
+};
+Swiper = __decorate([
+    wxComponent()
+], Swiper);
+export default Swiper;

miniprogram_npm/tdesign-miniprogram/swiper/swiper.json

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

miniprogram_npm/tdesign-miniprogram/swiper/swiper.wxml

@@ -0,0 +1,44 @@
+<wxs src="./index.wxs" module="this" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<view class="{{prefix}}-class {{classPrefix}}" 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(current, index, list)], ['next', this.isNext(current, index, list)]])}}"
+    >
+      <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}}"
+      />
+    </swiper-item>
+  </swiper>
+  <t-swiper-nav
+    wx:if="{{_navigation}}"
+    id="swiperNav"
+    t-class="{{prefix}}-class-nav"
+    type="{{_navigation.type}}"
+    minShowNum="{{_navigation.minShowNum}}"
+    showControls="{{_navigation.showControls}}"
+    bind:navBtnChange="onNavBtnChange"
+  />
+  <slot name="nav" />
+</view>

miniprogram_npm/tdesign-miniprogram/swiper/swiper.wxss

@@ -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;
+}
+.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 {
+  display: block;
+  width: 100%;
+}

miniprogram_npm/tdesign-miniprogram/swiper/type.d.ts

@@ -0,0 +1,77 @@
+export interface TdSwiperProps {
+    autoplay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    current?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    defaultCurrent?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    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;
+    };
+    interval?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    list?: {
+        type: ArrayConstructor;
+        value?: string[];
+    };
+    loop?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    navigation?: {
+        type: ObjectConstructor;
+        value?: SwiperNavigation;
+    };
+    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 SwiperNavigation {
+    customStyle?: string;
+    minShowNum?: number;
+    showSlideBtn?: boolean;
+    type?: SwiperNavigationType;
+}
+export declare type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';

miniprogram_npm/tdesign-miniprogram/swiper/type.js

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