From 99ec9dc37594b4c47eb0c6bcb1e826ac4e9fbd78 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 27 Jul 2022 09:57:30 +0800 Subject: [PATCH 1/3] feat(swiper): support pagination-position --- src/swiper/README.md | 113 ++++++++++++++++-------------------- src/swiper/props.ts | 18 +++++- src/swiper/swiper-nav.less | 115 ++++++++++++++++++++++++++++++------- src/swiper/swiper-nav.ts | 1 + src/swiper/swiper-nav.wxml | 6 +- src/swiper/swiper.ts | 3 +- src/swiper/type.ts | 57 +++++++++++++----- 7 files changed, 209 insertions(+), 104 deletions(-) diff --git a/src/swiper/README.md b/src/swiper/README.md index 1c54d6e1f..d7ced5c73 100644 --- a/src/swiper/README.md +++ b/src/swiper/README.md @@ -21,80 +21,60 @@ isComponent: true 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` 组件 -```html - - - - {{index}} - - - - - - - {{index}} - - - -``` -```js -data: { - current: 1, - items: [ - { - cls: 'item0', - image: `01.png`, - }, - { - cls: 'item1', - image: `02.png`, - }, - { - cls: 'item2', - image: `03.png`, - }, - { - cls: 'item3', - image: `04.png`, - }, - { - cls: 'item4', - image: `05.png`, - }, - ], -}, - -onChange(e) { - const { - detail: { current, source }, - } = e; - console.log(current, source) -}, -``` +### 点状(dots)轮播图 +{{ base }} -## API +### 分式(fraction)导航器轮播图 + +{{ fraction }} +### 插槽自定义导航器轮播图 + +{{ custom }} + +### 按钮导航器轮播图 + +{{ nav-btn }} + +### 轮播图垂直样式 + +{{ vertical }} + +## API ### Swiper Props -| 名称 | 类型 | 默认值 | 说明 | 必传 | -| ---------- | ------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| animation | String | slide | 轮播切换动画效果类型。可选项：slide | N | -| autoplay | Boolean | true | 是否自动播放 | N | -| current | Number | 0 | 当前轮播在哪一项（下标） | N | -| direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N | -| duration | Number | 300 | 滑动动画时长 | N | -| height | Number | - | 当使用垂直方向滚动时的高度 | N | -| interval | Number | 5000 | 轮播间隔时间 | N | -| navigation | Object | - | 导航配置。`navigation.type` 表示导航器风格，圆点/分式等，没有值则不显示。`navigation.minShowNum` 表示小于这个数字不会显示导航器。`navigation.showSlideBtn` 表示是否显示两侧的滑动控制按钮。TS 类型：`Navigation`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N | +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +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 @@ -102,3 +82,10 @@ onChange(e) { -- | -- | -- change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' | 'touch' | ''`
+### 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 diff --git a/src/swiper/props.ts b/src/swiper/props.ts index 6cb2866a6..2cc7f5e26 100644 --- a/src/swiper/props.ts +++ b/src/swiper/props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-24 10:58:05 * */ import { TdSwiperProps } from './type'; @@ -19,6 +18,11 @@ const props: TdSwiperProps = { }, /** 当前轮播在哪一项（下标） */ current: { + type: Number, + value: null, + }, + /** 当前轮播在哪一项（下标），非受控属性 */ + defaultCurrent: { type: Number, value: 0, }, @@ -41,10 +45,20 @@ const props: TdSwiperProps = { type: Number, value: 5000, }, - /** 导航配置。`navigation.type` 表示导航器风格，圆点/分式等，没有值则不显示。`navigation.minShowNum` 表示小于这个数字不会显示导航器。`navigation.showSlideBtn` 表示是否显示两侧的滑动控制按钮 */ + /** 是否循环播放 */ + loop: { + type: Boolean, + value: true, + }, + /** 导航器全部配置 */ navigation: { type: Object, }, + /** 页码信息展示位置 */ + paginationPosition: { + type: String, + value: 'bottom', + }, }; export default props; diff --git a/src/swiper/swiper-nav.less b/src/swiper/swiper-nav.less index d12f24aa5..42ef67b01 100644 --- a/src/swiper/swiper-nav.less +++ b/src/swiper/swiper-nav.less @@ -1,25 +1,37 @@ @import '../common/style/index.less'; +@swiper-nav-dot-color: rgba(255, 255, 255, 0.55); +@swiper-nav-dot-active-color: #fff; +@swiper-nav-fraction-color: #fff; +@swiper-nav-fraction-bg-color: rgba(0, 0, 0, 0.4); +@swiper-nav-btn-color: #fff; +@swiper-nav-btn-bg-color: rgba(0, 0, 0, 0.4); + +page { + --td-swiper-nav-dot-color: @swiper-nav-dot-color; + --td-swiper-nav-dot-active-color: @swiper-nav-dot-active-color; + --td-swiper-nav-fraction-color: @swiper-nav-fraction-color; + --td-swiper-nav-fraction-bg-color: @swiper-nav-fraction-bg-color; + --td-swiper-nav-btn-color: @swiper-nav-btn-color; + --td-swiper-nav-btn-bg-color: @swiper-nav-btn-bg-color; +} + .@{prefix}-swiper-nav { &__dots, &__dots-bar { - position: absolute; - left: 50%; - bottom: 20rpx; - transform: translateX(-50%); display: flex; flex-direction: row; &-item { width: 12rpx; height: 12rpx; - background: rgba(255, 255, 255, .55); + background: var(--td-swiper-nav-dot-color, @swiper-nav-dot-color); border-radius: 50%; margin: 0 10rpx; - transition: all .4s ease-in; + transition: all 0.4s ease-in; &.@{prefix}-is-active { - background-color: #fff; + background-color: var(--td-swiper-nav-dot-active-color, @swiper-nav-dot-active-color); } } } @@ -29,18 +41,83 @@ &.@{prefix}-is-active { width: 40rpx; border-radius: 6rpx; - background-color: #fff; + background-color: var(--td-swiper-nav-dot-active-color, @swiper-nav-dot-active-color); } } } + &--position { + &-left .@{prefix}-swiper-nav__dots, + &-left .@{prefix}-swiper-nav__dots-bar, + &-left .@{prefix}-swiper-nav__fraction { + position: absolute; + left: 24rpx; + top: 50%; + transform: translateY(-50%); + } + + &-right .@{prefix}-swiper-nav__dots, + &-right .@{prefix}-swiper-nav__dots-bar, + &-right .@{prefix}-swiper-nav__fraction { + position: absolute; + right: 24rpx; + top: 50%; + transform: translateY(-50%); + } + + &-top-left .@{prefix}-swiper-nav__dots, + &-top-left .@{prefix}-swiper-nav__dots-bar, + &-top-left .@{prefix}-swiper-nav__fraction { + position: absolute; + top: 24rpx; + left: 24rpx; + } + + &-top .@{prefix}-swiper-nav__dots, + &-top .@{prefix}-swiper-nav__dots-bar, + &-top .@{prefix}-swiper-nav__fraction { + position: absolute; + left: 50%; + top: 24rpx; + transform: translateX(-50%); + } + + &-top-right .@{prefix}-swiper-nav__dots, + &-top-right .@{prefix}-swiper-nav__dots-bar, + &-top-right .@{prefix}-swiper-nav__fraction { + position: absolute; + top: 24rpx; + right: 24rpx; + } + + &-bottom-left .@{prefix}-swiper-nav__dots, + &-bottom-left .@{prefix}-swiper-nav__dots-bar, + &-bottom-left .@{prefix}-swiper-nav__fraction { + position: absolute; + left: 24rpx; + bottom: 24rpx; + } + + &-bottom .@{prefix}-swiper-nav__dots, + &-bottom .@{prefix}-swiper-nav__dots-bar, + &-bottom .@{prefix}-swiper-nav__fraction { + position: absolute; + left: 50%; + bottom: 24rpx; + transform: translateX(-50%); + } + + &-bottom-right .@{prefix}-swiper-nav__dots, + &-bottom-right .@{prefix}-swiper-nav__dots-bar, + &-bottom-right .@{prefix}-swiper-nav__fraction { + position: absolute; + right: 24rpx; + bottom: 24rpx; + } + } + &--vertical &__dots, &--vertical &__dots-bar { - left: auto; - right: 20rpx; - top: 50%; - bottom: auto; - transform: translateY(-50%); flex-direction: column; &-item { @@ -58,15 +135,13 @@ } &__fraction { - position: absolute; - right: 20rpx; - bottom: 20rpx; + width: 40rpx; padding: 0 20rpx; height: 40rpx; line-height: 40rpx; border-radius: 20rpx; - background: rgba(0, 0, 0, .4); - color: #fff; + background: var(--td-swiper-nav-fraction-bg-color, @swiper-nav-fraction-bg-color); + color: var(--td-swiper-nav-fraction-color, @swiper-nav-fraction-color); font-size: 24rpx; } @@ -79,7 +154,7 @@ width: 40rpx; height: 40rpx; border-radius: 50%; - background: rgba(0, 0, 0, .4); + background: var(--td-swiper-nav-btn-bg-color, @swiper-nav-btn-bg-color); &::after { position: absolute; @@ -89,7 +164,7 @@ content: ''; width: 12rpx; height: 12rpx; - border-color: #fff; + border-color: var(--td-swiper-nav-btn-color, @swiper-nav-btn-color); border-style: solid; } } diff --git a/src/swiper/swiper-nav.ts b/src/swiper/swiper-nav.ts index 661106ec6..f67d135f2 100644 --- a/src/swiper/swiper-nav.ts +++ b/src/swiper/swiper-nav.ts @@ -13,6 +13,7 @@ type NavOptions = { index: number; total: number; direction: boolean; + paginationPosition: boolean; }; @wxComponent() diff --git a/src/swiper/swiper-nav.wxml b/src/swiper/swiper-nav.wxml index ce4c5ce58..810e34f30 100644 --- a/src/swiper/swiper-nav.wxml +++ b/src/swiper/swiper-nav.wxml @@ -1,5 +1,5 @@ @@ -10,9 +10,7 @@ class="{{classPrefix}}__{{type}}-item {{index === idx ? prefix + '-is-active' : ''}}" /> - - {{index+1}}/{{total}} - + {{index+1}}/{{total}} diff --git a/src/swiper/swiper.ts b/src/swiper/swiper.ts index a311d20d7..200cae946 100644 --- a/src/swiper/swiper.ts +++ b/src/swiper/swiper.ts @@ -282,11 +282,12 @@ export default class Swiper extends SuperComponent { */ updateNav(index) { if (!this.$nav) return; - const { direction } = this.properties; + const { direction, paginationPosition } = this.properties; this.$nav?.onChange({ index, total: this.children.length, direction, + paginationPosition, }); } diff --git a/src/swiper/type.ts b/src/swiper/type.ts index ea842d6fd..3ae66a0c5 100644 --- a/src/swiper/type.ts +++ b/src/swiper/type.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-24 10:58:05 * */ export interface TdSwiperProps { @@ -13,7 +12,6 @@ export interface TdSwiperProps { animation?: { type: StringConstructor; value?: 'slide'; - required?: boolean; }; /** * 是否自动播放 @@ -22,7 +20,6 @@ export interface TdSwiperProps { autoplay?: { type: BooleanConstructor; value?: boolean; - required?: boolean; }; /** * 当前轮播在哪一项（下标） @@ -31,7 +28,14 @@ export interface TdSwiperProps { current?: { type: NumberConstructor; value?: number; - required?: boolean; + }; + /** + * 当前轮播在哪一项（下标），非受控属性 + * @default 0 + */ + defaultCurrent?: { + type: NumberConstructor; + value?: number; }; /** * 轮播滑动方向，包括横向滑动和纵向滑动两个方向 @@ -40,7 +44,6 @@ export interface TdSwiperProps { direction?: { type: StringConstructor; value?: 'horizontal' | 'vertical'; - required?: boolean; }; /** * 滑动动画时长 @@ -49,7 +52,6 @@ export interface TdSwiperProps { duration?: { type: NumberConstructor; value?: number; - required?: boolean; }; /** * 当使用垂直方向滚动时的高度 @@ -57,7 +59,6 @@ export interface TdSwiperProps { height?: { type: NumberConstructor; value?: number; - required?: boolean; }; /** * 轮播间隔时间 @@ -66,18 +67,46 @@ export interface TdSwiperProps { interval?: { type: NumberConstructor; value?: number; - required?: boolean; }; /** - * 导航配置。`navigation.type` 表示导航器风格，圆点/分式等，没有值则不显示。`navigation.minShowNum` 表示小于这个数字不会显示导航器。`navigation.showSlideBtn` 表示是否显示两侧的滑动控制按钮 + * 是否循环播放 + * @default true + */ + loop?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 导航器全部配置 */ navigation?: { type: ObjectConstructor; - value?: Navigation; - required?: boolean; + value?: SwiperNavigation; + }; + /** + * 页码信息展示位置 + * @default bottom-right + */ + paginationPosition?: { + type: StringConstructor; + value?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right'; }; -}; +} -export interface Navigation { type?: NavigationVariant; minShowNum?: number; showSlideBtn?: boolean }; +export interface SwiperNavigation { + /** + * 小于这个数字不会显示导航器 + */ + minShowNum?: number; + /** + * 表示是否显示两侧的滑动控制按钮 + */ + showSlideBtn?: boolean; + /** + * 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等 + * @default '' + */ + type?: SwiperNavigationType; +} -export type NavigationVariant = 'dots' | 'dots-bar' | 'fraction'; +export type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction'; From 83ef39ef1325a3d6c8ab946ae583e83a19d18cc6 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 27 Jul 2022 09:58:09 +0800 Subject: [PATCH 2/3] docs(swiper): update code sample --- src/swiper/_example/base/index.js | 37 +++++++ src/swiper/_example/base/index.json | 7 ++ src/swiper/_example/base/index.wxml | 12 +++ src/swiper/_example/base/index.wxss | 14 +++ src/swiper/_example/custom/index.js | 28 +++++ src/swiper/_example/custom/index.json | 8 ++ src/swiper/_example/custom/index.wxml | 7 ++ src/swiper/_example/custom/index.wxss | 14 +++ src/swiper/_example/fraction/index.js | 30 ++++++ src/swiper/_example/fraction/index.json | 7 ++ src/swiper/_example/fraction/index.wxml | 12 +++ src/swiper/_example/fraction/index.wxss | 14 +++ src/swiper/_example/nav-btn/index.js | 29 +++++ src/swiper/_example/nav-btn/index.json | 7 ++ src/swiper/_example/nav-btn/index.wxml | 11 ++ src/swiper/_example/nav-btn/index.wxss | 14 +++ src/swiper/_example/swiper.json | 7 +- src/swiper/_example/swiper.less | 136 +----------------------- src/swiper/_example/swiper.ts | 63 +---------- src/swiper/_example/swiper.wxml | 108 ++----------------- src/swiper/_example/vertical/index.js | 54 ++++++++++ src/swiper/_example/vertical/index.json | 9 ++ src/swiper/_example/vertical/index.wxml | 58 ++++++++++ src/swiper/_example/vertical/index.wxss | 73 +++++++++++++ 24 files changed, 461 insertions(+), 298 deletions(-) create mode 100644 src/swiper/_example/base/index.js create mode 100644 src/swiper/_example/base/index.json create mode 100644 src/swiper/_example/base/index.wxml create mode 100644 src/swiper/_example/base/index.wxss create mode 100644 src/swiper/_example/custom/index.js create mode 100644 src/swiper/_example/custom/index.json create mode 100644 src/swiper/_example/custom/index.wxml create mode 100644 src/swiper/_example/custom/index.wxss create mode 100644 src/swiper/_example/fraction/index.js create mode 100644 src/swiper/_example/fraction/index.json create mode 100644 src/swiper/_example/fraction/index.wxml create mode 100644 src/swiper/_example/fraction/index.wxss create mode 100644 src/swiper/_example/nav-btn/index.js create mode 100644 src/swiper/_example/nav-btn/index.json create mode 100644 src/swiper/_example/nav-btn/index.wxml create mode 100644 src/swiper/_example/nav-btn/index.wxss create mode 100644 src/swiper/_example/vertical/index.js create mode 100644 src/swiper/_example/vertical/index.json create mode 100644 src/swiper/_example/vertical/index.wxml create mode 100644 src/swiper/_example/vertical/index.wxss diff --git a/src/swiper/_example/base/index.js b/src/swiper/_example/base/index.js new file mode 100644 index 000000000..ef514e942 --- /dev/null +++ b/src/swiper/_example/base/index.js @@ -0,0 +1,37 @@ +const imageCdn = 'https://tdesign.gtimg.com/site/swiper'; +const swiperList = [ + { + image: `${imageCdn}/01.png`, + }, + { + image: `${imageCdn}/02.png`, + }, + { + image: `${imageCdn}/03.png`, + }, + { + image: `${imageCdn}/04.png`, + }, + { + image: `${imageCdn}/05.png`, + }, +]; + +Component({ + data: { + current: 1, + autoplay: true, + duration: 500, + interval: 5000, + swiperList, + }, + + methods: { + onChange(e) { + const { + detail: { current, source }, + } = e; + console.log(current, source); + }, + }, +}); diff --git a/src/swiper/_example/base/index.json b/src/swiper/_example/base/index.json new file mode 100644 index 000000000..64a7e6714 --- /dev/null +++ b/src/swiper/_example/base/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-swiper": "tdesign-miniprogram/swiper/swiper", + "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item" + } +} diff --git a/src/swiper/_example/base/index.wxml b/src/swiper/_example/base/index.wxml new file mode 100644 index 000000000..f761dfad9 --- /dev/null +++ b/src/swiper/_example/base/index.wxml @@ -0,0 +1,12 @@ + + + {{index}} + + diff --git a/src/swiper/_example/base/index.wxss b/src/swiper/_example/base/index.wxss new file mode 100644 index 000000000..815af00da --- /dev/null +++ b/src/swiper/_example/base/index.wxss @@ -0,0 +1,14 @@ +.item { + width: 100%; + height: 100%; + text-align: center; + line-height: 300rpx; +} + +.img { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} diff --git a/src/swiper/_example/custom/index.js b/src/swiper/_example/custom/index.js new file mode 100644 index 000000000..7d270976e --- /dev/null +++ b/src/swiper/_example/custom/index.js @@ -0,0 +1,28 @@ +const imageCdn = 'https://tdesign.gtimg.com/site/swiper'; +const swiperList = [ + { + image: `${imageCdn}/01.png`, + }, + { + image: `${imageCdn}/02.png`, + }, + { + image: `${imageCdn}/03.png`, + }, + { + image: `${imageCdn}/04.png`, + }, + { + image: `${imageCdn}/05.png`, + }, +]; + +Component({ + data: { + current: 1, + autoplay: true, + duration: 500, + interval: 5000, + swiperList, + }, +}); diff --git a/src/swiper/_example/custom/index.json b/src/swiper/_example/custom/index.json new file mode 100644 index 000000000..4baabb80d --- /dev/null +++ b/src/swiper/_example/custom/index.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "t-swiper": "tdesign-miniprogram/swiper/swiper", + "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item", + "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav" + } +} diff --git a/src/swiper/_example/custom/index.wxml b/src/swiper/_example/custom/index.wxml new file mode 100644 index 000000000..481629aa9 --- /dev/null +++ b/src/swiper/_example/custom/index.wxml @@ -0,0 +1,7 @@ + + + {{index}} + + + + diff --git a/src/swiper/_example/custom/index.wxss b/src/swiper/_example/custom/index.wxss new file mode 100644 index 000000000..815af00da --- /dev/null +++ b/src/swiper/_example/custom/index.wxss @@ -0,0 +1,14 @@ +.item { + width: 100%; + height: 100%; + text-align: center; + line-height: 300rpx; +} + +.img { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} diff --git a/src/swiper/_example/fraction/index.js b/src/swiper/_example/fraction/index.js new file mode 100644 index 000000000..fcf4e7250 --- /dev/null +++ b/src/swiper/_example/fraction/index.js @@ -0,0 +1,30 @@ +const imageCdn = 'https://tdesign.gtimg.com/site/swiper'; +const swiperList = [ + { + image: `${imageCdn}/01.png`, + }, + { + image: `${imageCdn}/02.png`, + }, + { + image: `${imageCdn}/03.png`, + }, + { + image: `${imageCdn}/04.png`, + }, + { + image: `${imageCdn}/05.png`, + }, +]; + +Component({ + data: { + current: 2, + autoplay: true, + duration: 500, + interval: 5000, + paginationPosition: 'bottom-right', + swiperList, + navigation: { type: 'fraction' }, + }, +}); diff --git a/src/swiper/_example/fraction/index.json b/src/swiper/_example/fraction/index.json new file mode 100644 index 000000000..64a7e6714 --- /dev/null +++ b/src/swiper/_example/fraction/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-swiper": "tdesign-miniprogram/swiper/swiper", + "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item" + } +} diff --git a/src/swiper/_example/fraction/index.wxml b/src/swiper/_example/fraction/index.wxml new file mode 100644 index 000000000..72453c43e --- /dev/null +++ b/src/swiper/_example/fraction/index.wxml @@ -0,0 +1,12 @@ + + + {{index}} + + diff --git a/src/swiper/_example/fraction/index.wxss b/src/swiper/_example/fraction/index.wxss new file mode 100644 index 000000000..815af00da --- /dev/null +++ b/src/swiper/_example/fraction/index.wxss @@ -0,0 +1,14 @@ +.item { + width: 100%; + height: 100%; + text-align: center; + line-height: 300rpx; +} + +.img { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} diff --git a/src/swiper/_example/nav-btn/index.js b/src/swiper/_example/nav-btn/index.js new file mode 100644 index 000000000..15b22df53 --- /dev/null +++ b/src/swiper/_example/nav-btn/index.js @@ -0,0 +1,29 @@ +const imageCdn = 'https://tdesign.gtimg.com/site/swiper'; +const swiperList = [ + { + image: `${imageCdn}/01.png`, + }, + { + image: `${imageCdn}/02.png`, + }, + { + image: `${imageCdn}/03.png`, + }, + { + image: `${imageCdn}/04.png`, + }, + { + image: `${imageCdn}/05.png`, + }, +]; + +Component({ + data: { + current: 3, + autoplay: true, + duration: 500, + interval: 5000, + swiperList, + navigation: { type: '', hasNavBtn: true }, + }, +}); diff --git a/src/swiper/_example/nav-btn/index.json b/src/swiper/_example/nav-btn/index.json new file mode 100644 index 000000000..64a7e6714 --- /dev/null +++ b/src/swiper/_example/nav-btn/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-swiper": "tdesign-miniprogram/swiper/swiper", + "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item" + } +} diff --git a/src/swiper/_example/nav-btn/index.wxml b/src/swiper/_example/nav-btn/index.wxml new file mode 100644 index 000000000..f1adbeb04 --- /dev/null +++ b/src/swiper/_example/nav-btn/index.wxml @@ -0,0 +1,11 @@ + + + {{index}} + + diff --git a/src/swiper/_example/nav-btn/index.wxss b/src/swiper/_example/nav-btn/index.wxss new file mode 100644 index 000000000..815af00da --- /dev/null +++ b/src/swiper/_example/nav-btn/index.wxss @@ -0,0 +1,14 @@ +.item { + width: 100%; + height: 100%; + text-align: center; + line-height: 300rpx; +} + +.img { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} diff --git a/src/swiper/_example/swiper.json b/src/swiper/_example/swiper.json index cb859a03a..65b321fbf 100644 --- a/src/swiper/_example/swiper.json +++ b/src/swiper/_example/swiper.json @@ -3,6 +3,11 @@ "navigationBarBackgroundColor": "#fff", "backgroundColor": "#fff", "usingComponents": { - "t-demo": "../../components/demo-block/index" + "t-demo": "../../components/demo-block/index", + "base": "./base", + "fraction": "./fraction", + "nav-btn": "./nav-btn", + "custom": "./custom", + "vertical": "./vertical" } } diff --git a/src/swiper/_example/swiper.less b/src/swiper/_example/swiper.less index 519b4e0e2..5bc71e436 100644 --- a/src/swiper/_example/swiper.less +++ b/src/swiper/_example/swiper.less @@ -3,146 +3,12 @@ page { } .swiper-demo { - .demo-section { - } - - .t-slider__wrapper .t-slider__main { - margin: 0; - } - - &-tag { - line-height: 1.4; - font-size: 30rpx; - padding-left: 20rpx; - border-left: 4rpx solid #c461a3; - margin: 20rpx 0; - } - - &-space { - height: 30rpx; - } - - .swiper-switch { - margin: 22rpx 0; - - .t-switch__label { - display: none; - } - } - - .swiper-wrap { - // border-radius: 16rpx; - // overflow: hidden; - // transform: translateY(0); - } - .swiper-box { - margin: 0 32rpx; + margin: 0 32rpx 32rpx; border-radius: 16rpx; overflow: hidden; // fix: 小程序webview圆角BUG，下面的样式规避圆角在真机失效的问题 // https://developers.weixin.qq.com/community/develop/doc/00026658428810dd8c07c062556400 transform: translateY(0); } - // 样式覆盖 - // .t-swiper-nav-dots-bar-item { - // background: #1b131850; - // } - - // .t-swiper-nav-dots-bar-item.active { - // background: #080006; - // } - - .swiper-box-option { - overflow: visible; - border-radius: 0; - } - - .swiper-vertical { - height: 400rpx; - } - - // .swiper-box2 { - // .item { - // .img { - // height: 300rpx; - // } - // } - // } - - .swiper-box-vertical { - .item { - line-height: 400rpx; - - // .img { - // } - } - } - - .item { - width: 100%; - height: 100%; - // background-color: #0052d9; - text-align: center; - line-height: 300rpx; - - .img { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - } - - // &.item0 { - // background-color: #4fb669; - // } - - // &.item1 { - // background-color: #c461a3; - // } - - // &.item2 { - // background-color: #3830a1; - // } - - // &.item3 { - // background-color: #acb47e; - // } - - // &.item4 { - // background-color: #363444; - // } - } - - .cell { - padding: 10rpx 0; - font-size: 28rpx; - color: #999; - - &.row { - display: flex; - flex-direction: row; - } - - .label { - color: #999; - margin-right: 20rpx; - } - - .option { - display: flex; - flex-direction: row; - justify-content: start; - align-items: center; - } - - .option-desc { - padding: 0 30rpx; - } - - .swiper-slider { - flex: 1; - } - } } diff --git a/src/swiper/_example/swiper.ts b/src/swiper/_example/swiper.ts index e73392d7d..560d44d43 100644 --- a/src/swiper/_example/swiper.ts +++ b/src/swiper/_example/swiper.ts @@ -1,62 +1 @@ -const imageCdn = 'https://tdesign.gtimg.com/site/swiper'; -const items = [ - { - cls: 'item0', - image: `${imageCdn}/01.png`, - }, - { - cls: 'item1', - image: `${imageCdn}/02.png`, - }, - { - cls: 'item2', - image: `${imageCdn}/03.png`, - }, - { - cls: 'item3', - image: `${imageCdn}/04.png`, - }, - { - cls: 'item4', - image: `${imageCdn}/05.png`, - }, -]; - -Page({ - data: { - current: 1, - autoplay: true, - duration: 500, - interval: 5000, - items, - navigation1: { type: 'dots-bar' }, - navigation2: { type: 'fraction' }, - navigation3: { type: '', hasNavBtn: true }, - }, - onChange(e) { - const { - detail: { current, source }, - } = e; - console.log(current, source); - // if (source === 'touch') { - // this.setData({ - // current, - // }); - // } - }, - onAutoplayChange(e) { - this.setData({ - autoplay: e.detail.value, - }); - }, - onIntervalChange(e) { - this.setData({ - interval: e.detail.value, - }); - }, - onDurationChange(e) { - this.setData({ - duration: e.detail.value, - }); - }, -}); +Page({}); diff --git a/src/swiper/_example/swiper.wxml b/src/swiper/_example/swiper.wxml index 31b0d3687..cb5711f80 100644 --- a/src/swiper/_example/swiper.wxml +++ b/src/swiper/_example/swiper.wxml @@ -5,114 +5,22 @@ - - - {{index}} - - + - + - - - {{index}} - - + - + - - - {{index}} - - - - + - + - - - {{index}} - - + - - - - {{index}} - - - - - - - 自动播放 - - - {{autoplay?'开':'关'}} - - - - 自动播放间隔时间(单位毫秒) - - - {{interval}} - - - - 动画持续时间(单位毫秒) - - - {{duration}} - - - + diff --git a/src/swiper/_example/custom/index.wxss b/src/swiper/_example/custom/index.wxss index 815af00da..c78a03291 100644 --- a/src/swiper/_example/custom/index.wxss +++ b/src/swiper/_example/custom/index.wxss @@ -1,14 +1,4 @@ -.item { - width: 100%; - height: 100%; - text-align: center; - line-height: 300rpx; -} - .img { - position: absolute; - left: 0; - top: 0; width: 100%; height: 100%; } diff --git a/src/swiper/_example/fraction/index.wxml b/src/swiper/_example/fraction/index.wxml index 72453c43e..c258af768 100644 --- a/src/swiper/_example/fraction/index.wxml +++ b/src/swiper/_example/fraction/index.wxml @@ -7,6 +7,6 @@ paginationPosition="{{paginationPosition}}" > - {{index}} + diff --git a/src/swiper/_example/fraction/index.wxss b/src/swiper/_example/fraction/index.wxss index 815af00da..c78a03291 100644 --- a/src/swiper/_example/fraction/index.wxss +++ b/src/swiper/_example/fraction/index.wxss @@ -1,14 +1,4 @@ -.item { - width: 100%; - height: 100%; - text-align: center; - line-height: 300rpx; -} - .img { - position: absolute; - left: 0; - top: 0; width: 100%; height: 100%; } diff --git a/src/swiper/_example/nav-btn/index.wxml b/src/swiper/_example/nav-btn/index.wxml index f1adbeb04..8581ba472 100644 --- a/src/swiper/_example/nav-btn/index.wxml +++ b/src/swiper/_example/nav-btn/index.wxml @@ -6,6 +6,6 @@ navigation="{{navigation}}" > - {{index}} + diff --git a/src/swiper/_example/nav-btn/index.wxss b/src/swiper/_example/nav-btn/index.wxss index 815af00da..c78a03291 100644 --- a/src/swiper/_example/nav-btn/index.wxss +++ b/src/swiper/_example/nav-btn/index.wxss @@ -1,14 +1,4 @@ -.item { - width: 100%; - height: 100%; - text-align: center; - line-height: 300rpx; -} - .img { - position: absolute; - left: 0; - top: 0; width: 100%; height: 100%; } diff --git a/src/swiper/_example/vertical/index.wxml b/src/swiper/_example/vertical/index.wxml index 5e26e6eac..84d113ee1 100644 --- a/src/swiper/_example/vertical/index.wxml +++ b/src/swiper/_example/vertical/index.wxml @@ -10,7 +10,7 @@ height="{{400}}" > - {{index}} + diff --git a/src/swiper/_example/vertical/index.wxss b/src/swiper/_example/vertical/index.wxss index e235e7463..9685e784a 100644 --- a/src/swiper/_example/vertical/index.wxss +++ b/src/swiper/_example/vertical/index.wxss @@ -5,17 +5,7 @@ transform: translateY(0); } -.swiper-box .item { - width: 100%; - height: 100%; - text-align: center; - line-height: 300rpx; -} - .swiper-box .img { - position: absolute; - left: 0; - top: 0; width: 100%; height: 100%; } diff --git a/src/swiper/swiper-nav.ts b/src/swiper/swiper-nav.ts index f67d135f2..d1a16b44b 100644 --- a/src/swiper/swiper-nav.ts +++ b/src/swiper/swiper-nav.ts @@ -13,7 +13,7 @@ type NavOptions = { index: number; total: number; direction: boolean; - paginationPosition: boolean; + paginationPosition: string; }; @wxComponent()