diff --git a/docs/component/swiper.md b/docs/component/swiper.md index f8e280fe..907d8e92 100644 --- a/docs/component/swiper.md +++ b/docs/component/swiper.md @@ -1,8 +1,12 @@ -# Swiper 轮播图 0.1.22 +# Swiper 轮播 -用于创建轮播图，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置。 +用于创建轮播，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置，支持视频和图片资源的轮播，支持设置轮播标题和自定义标题样式。 + +:::danger 请注意 +嵌入视频仅在`h5`、`微信小程序`和`钉钉小程序`支持，其余端不支持，请了解后使用。 +::: ## 基础用法 @@ -50,6 +54,60 @@ function onChange(e) { > ``` +## 视频轮播1.3.13 + +:::danger 请注意 +嵌入视频仅在`h5`、`微信小程序`和`钉钉小程序`支持，其余端不支持，请了解后使用。 +::: + +```html + +``` + +```ts +const videoList = ref([ + 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4', + 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4', + 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4', + 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg' +]) +``` + +## 手动播放视频 + +```html + +``` + +```ts +const videoList = ref([ + 'https://unpkg.com/wot-design-uni-assets/VID_115503.mp4', + 'https://unpkg.com/wot-design-uni-assets/VID_150752.mp4', + 'https://unpkg.com/wot-design-uni-assets/VID_155516.mp4' +]) +``` + +## 播放视频时停止轮播 + +```html + +``` + +```ts +const videoList = ref([ + 'https://unpkg.com/wot-design-uni-assets/VID_115503.mp4', + 'https://unpkg.com/wot-design-uni-assets/VID_150752.mp4', + 'https://unpkg.com/wot-design-uni-assets/VID_155516.mp4' +]) +``` + ## 手动切换 ```html @@ -186,25 +244,39 @@ function onChange(e) { } ``` -## 指定valueKey 1.3.7 +## 指定valueKey和textKey 通过`value-key` 属性指定 `list` 中每个对象图片地址字段，默认为 `value`。 +通过`text-key` 属性指定 `list` 中每个对象标题字段，默认为 `text`。 +:::tip 提示 +当前`swiper`提供的标题样式为顶部靠右，如需自定义样式，请使用外部样式类`customTextClass`或者自定义样式`customTextStyle`，使用`text-key`时请确认你的组件库版本是否包含此功能。 +::: + ```html - + ``` ```ts const current = ref(0) const customSwiperList = ref([ - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg' }, - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg' }, - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg' }, - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg' } + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg', title: '小熊猫！' }, + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg', title: '卡！皮！巴！拉！' }, + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg', title: '大熊猫！' }, + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg', title: '诗画中国！' } ]) ``` - +```scss +:deep(.customTextClass) { + position: absolute; + top: 24rpx; + right: 24rpx; + color: #ffffff; + font-size: 24rpx; + text-shadow: 0 0 8rpx #000000; +} +``` ## 属性控制切换 @@ -231,26 +303,33 @@ const isLoop = ref(false) ## Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| -------------------- | ------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------ | -------- | -| autoplay | 是否自动播放 | `boolean` | - | true | 0.1.22 | -| v-model:current | 控制当前轮播在哪一项（下标） | `number` | - | 0 | 0.1.22 | -| direction | 轮播滑动方向 | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 | -| displayMultipleItems | 同时显示的滑块数量 | `number` | - | 1 | 0.1.22 | -| duration | 滑动动画时长 | `number` | - | 300 | 0.1.22 | -| easingFunction | 切换缓动动画类型（微信小程序、快手小程序、京东小程序） | `EasingType` | - | default | 0.1.22 | -| height | 轮播的高度 | `string \| number` | - | 192 | 0.1.22 | -| interval | 轮播间隔时间 | `number` | - | 5000 | 0.1.22 | -| list | 图片列表 | `string[] \| SwiperList[]` | - | - | 0.1.22 | -| loop | 是否循环播放 | `boolean` | - | true | 0.1.22 | -| nextMargin | 后边距 | `string \| number` | - | 0 | 0.1.22 | -| indicatorPosition | 指示器展示位置 | `IndicatorPositionType` | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 | -| previousMargin | 前边距 | `string \| number` | - | 0 | 0.1.22 | -| snapToEdge | 边距是否应用到第一个、最后一个元素 | `boolean` | - | false | 0.1.22 | -| indicator | 指示器全部配置 | `SwiperIndicatorProps \| boolean` | - | true | 0.1.22 | -| imageMode | 图片裁剪、缩放的模式 | `string` | 参考官方文档[mode](https://uniapp.dcloud.net.cn/component/image.html#mode-%E6%9C%89%E6%95%88%E5%80%BC) | `aspectFill` | 0.1.55 | -| customStyle | 外部自定义样式 | `string` | - | '' | 0.1.22 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------------------- | ------------------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------ | ---------------- | +| autoplay | 是否自动播放 | `boolean` | - | true | 0.1.22 | +| v-model:current | 控制当前轮播在哪一项（下标） | `number` | - | 0 | 0.1.22 | +| direction | 轮播滑动方向 | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 | +| displayMultipleItems | 同时显示的滑块数量 | `number` | - | 1 | 0.1.22 | +| duration | 滑动动画时长 | `number` | - | 300 | 0.1.22 | +| easingFunction | 切换缓动动画类型（微信小程序、快手小程序、京东小程序） | `EasingType` | - | default | 0.1.22 | +| height | 轮播的高度 | `string \| number` | - | 192 | 0.1.22 | +| interval | 轮播间隔时间 | `number` | - | 5000 | 0.1.22 | +| list | 图片列表 | `string[] \| SwiperList[]` | - | - | 0.1.22 | +| loop | 是否循环播放 | `boolean` | - | true | 0.1.22 | +| nextMargin | 后边距 | `string \| number` | - | 0 | 0.1.22 | +| indicatorPosition | 指示器展示位置 | `IndicatorPositionType` | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 | +| previousMargin | 前边距 | `string \| number` | - | 0 | 0.1.22 | +| snapToEdge | 边距是否应用到第一个、最后一个元素 | `boolean` | - | false | 0.1.22 | +| indicator | 指示器全部配置 | `SwiperIndicatorProps \| boolean` | - | true | 0.1.22 | +| imageMode | 图片裁剪、缩放的模式 | `string` | 参考官方文档[mode](https://uniapp.dcloud.net.cn/component/image.html#mode-%E6%9C%89%E6%95%88%E5%80%BC) | `aspectFill` | 0.1.55 | +| autoplayVideo | 视频是否自动播放，默认自动播放 | `boolean` | - | true | $LOWEST_VERSION$ | +| stopPreviousVideo  | 切换轮播项时是否停止上一个视频的播放，默认切换时停止播放上一个视频 | `boolean` | - | true | $LOWEST_VERSION$ | +| stopAutoplayWhenVideoPlay | 视频播放时是否停止自动轮播 | `boolean` | - | false | $LOWEST_VERSION$ | +| customStyle | 外部自定义样式 | `string` | - | '' | 0.1.22 | | value-key | 选项对象中，value 对应的 key | `string` | - | `value` | 1.3.7 | +| text-key | 选项对象中，标题 text 对应的 key | `string` | - | `text` | $LOWEST_VERSION$ | +| adjust-height | 自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整，仅支付宝小程序支持。| `string` | `'first' \| 'current' \| 'highest' \| 'none'` | `highest` | $LOWEST_VERSION$ | +| adjust-vertical-height | vertical 为 true 时强制使 adjust-height 生效。仅支付宝小程序支持。 | `boolean` | - | `false` | $LOWEST_VERSION$ | + ### DirectionType @@ -267,10 +346,15 @@ const isLoop = ref(false) ### SwiperList -轮播图项的列表配置，包括 `value` 属性，支持扩展属性。 +轮播图项的列表配置，包括 图片或视频地址`value`、视频封面`poster` 等属性，支持扩展属性。 ### SwiperIndicatorProps +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------------- | -------------------------- | --------------------- | -------------------------------------------------------------------------- | ---------- | -------- | +| current | 当前轮播在哪一项（下标） | Number | - | 0 | 0.1.22 | +| direction | 轮播滑动方向 | DirectionType | `horizontal, vertical` | horizontal | 0.1.22 | +| min-show-num | 小于这个数字不会显示导航器 | Number | - | 2 | 0.1.22 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ------------------- | -------------------------- | --------------------- | -------------------------------------------------------------------------- | ---------- | -------- | | current | 当前轮播在哪一项（下标） | Number | - | 0 | 0.1.22 | @@ -295,12 +379,18 @@ const isLoop = ref(false) | --------- | ------------ | ------------------------------------ | -------- | | indicator | 自定义指示器 | `{ current: number, total: number }` | 0.1.22 | + ## 外部样式类 | 类名 | 说明 | 最低版本 | | -------------------- | -------------------- | -------- | | customClass | 外部自定义类名 | 0.1.22 | -| customIndicatorClass | 自定义指示器类名 | 0.1.22 | -| customImageClass | 自定义图片类名 | 0.1.22 | -| customPrevImageClass | 自定义上一个图片类名 | 0.1.22 | -| customNextImageClass | 自定义下一个图片类名 | 0.1.22 | +| customIndicatorClass | 自定义指示器类名 | 0.1.22 | +| customImageClass | 自定义图片类名，1.3版本将废弃，请使用`customItemClass`代替 | 0.1.22 | +| customPrevImageClass | 自定义上一个图片类名，1.3版本将废弃，请使用`customPrevClass`代替 | 0.1.22 | +| customNextImageClass | 自定义下一个图片类名，1.3版本将废弃，请使用`customNextClass`代替 | 0.1.22 | +| customItemClass | 自定义子项类名 | $LOWEST_VERSION$ | +| customPrevClass | 自定义上一个子项类名 | $LOWEST_VERSION$ | +| customNextClass | 自定义下一个子项类名 | $LOWEST_VERSION$ | +| customTextClass | 自定义文字标题类名 | $LOWEST_VERSION$ | +| customTextStyle | 自定义文字标题样式 | $LOWEST_VERSION$ | diff --git a/src/pages/swiper/Index.vue b/src/pages/swiper/Index.vue index 1a22899b..548763af 100644 --- a/src/pages/swiper/Index.vue +++ b/src/pages/swiper/Index.vue @@ -34,6 +34,44 @@ > + + + + + + + + + + + + + + - - + + @@ -143,10 +189,17 @@ const swiperList = ref([ ]) const customSwiperList = ref([ - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg' }, - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg' }, - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg' }, - { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg' } + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg', title: '小熊猫！' }, + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg', title: '卡！皮！巴！拉！' }, + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg', title: '大熊猫！' }, + { url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg', title: '诗画中国！' } +]) + +const videoList = ref([ + 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4', + 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4', + 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4', + 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg' ]) const current = ref(0) @@ -159,6 +212,7 @@ const current6 = ref(0) const current7 = ref(0) const current8 = ref(0) const current9 = ref(0) +const current10 = ref(0) const isLoop = ref(false) @@ -187,6 +241,11 @@ function onChange(e: any) { } } +.custom-slot-image { + width: 100%; + height: 100%; +} + .custom-indicator { padding: 0 12rpx; height: 48rpx; diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss index 39184e71..5b89a0e4 100644 --- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss +++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss @@ -766,6 +766,9 @@ $-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; // /* swiper */ $-swiper-radius: var(--wot-swiper-radius, 8px); $-swiper-item-padding: var(--wot-swiper-item-padding, 0); +$-swiper-item-text-color: var(--wot-swiper-item-text-color, #ffffff); +$-swiper-item-text-fs: var(--wot-swiper-item-text-fs, $-fs-title); + /* swiper-nav */ // dot & dots-bar diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/index.scss b/src/uni_modules/wot-design-uni/components/wd-swiper/index.scss index 76fd34d3..70c9192c 100644 --- a/src/uni_modules/wot-design-uni/components/wd-swiper/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-swiper/index.scss @@ -3,21 +3,31 @@ @include b(swiper) { position: relative; - @include e(track){ + + @include e(track) { border-radius: $-swiper-radius; overflow: hidden; transform: translateY(0); } - @include e(item){ + @include e(item) { display: flex; align-items: center; box-sizing: border-box; padding: $-swiper-item-padding; } - @include e(image){ + @include e(image, video) { width: 100%; transition: all 0.3s ease; } + + @include e(text) { + // 随便搞个样式，反正用户还是会覆盖的 + position: absolute; + right: 24rpx; + top: 24rpx; + color: $-swiper-item-text-color; + font-size: $-swiper-item-text-fs; + } } \ No newline at end of file diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts index 9277fd50..26826874 100644 --- a/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts @@ -18,9 +18,20 @@ export type EasingType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | */ export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right' +/** + * first：第一个滑块。 + * current：实时的当前滑块。 + * highest：高度最大的滑块。 + * none：不根据滑块调整高度，容器高度取决于自身样式。 + */ +export type AdjustHeightType = 'first' | 'current' | 'highest' | 'none' + export interface SwiperList { [key: string]: any + // 图片、视频等资源地址 value?: string + // 视频资源的封面 + poster?: string } export const swiperProps = { @@ -107,26 +118,23 @@ export const swiperProps = { nextMargin: makeNumericProp('0'), /** - * 页码信息展示位置，可选值：'bottom'（底部）等 + * 页码信息展示位置，可选值：'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right' * 类型：string * 默认值：'bottom' */ indicatorPosition: makeStringProp('bottom'), - /** * 前边距 * 类型：number 或 string（数字或可转换为数字的字符串） * 默认值：'0' */ previousMargin: makeNumericProp('0'), - /** * 是否应用边距到第一个、最后一个元素 * 类型：boolean * 默认值：false */ snapToEdge: makeBooleanProp(false), - /** * 指示器全部配置，可以是布尔值或指示器配置对象 * 类型：boolean 或 object @@ -147,6 +155,42 @@ export const swiperProps = { * 选项对象中，value 对应的 key */ valueKey: makeStringProp('value'), + /** + * 选项对象中，标题 text 对应的 key + */ + textKey: makeStringProp('text'), + /** + * 视频是否自动播放 + * 类型：boolean + * 默认值：true + */ + autoplayVideo: makeBooleanProp(true), + /** + * 切换轮播项时是否停止上一个视频的播放 + * 类型：boolean + * 默认值：true + */ + stopPreviousVideo: makeBooleanProp(true), + /** + * 视频播放时是否停止自动轮播 + * 类型：boolean + * 默认值：false + */ + stopAutoplayWhenVideoPlay: makeBooleanProp(false), + /** + * 自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整 + * 仅支付宝小程序支持 + * 类型：'first' | 'current' | 'highest' | 'none' + * 默认值：false + */ + adjustHeight: makeStringProp('highest'), + /** + * vertical 为 true 时强制使 adjust-height 生效。 + * 仅支付宝小程序支持 + * 类型：boolean + * 默认值：false + */ + adjustVerticalHeight: makeBooleanProp(false), /** * 自定义指示器类名 * 类型：string @@ -169,7 +213,33 @@ export const swiperProps = { * 自定义下一个图片类名 * 类型：string */ - customNextImageClass: makeStringProp('') + customNextImageClass: makeStringProp(''), + + /** + * 自定义swiper子项类名 + * 类型：string + */ + customItemClass: makeStringProp(''), + /** + * 自定义上一个子项类名 + * 类型：string + */ + customPrevClass: makeStringProp(''), + /** + * 自定义下一个子项类名 + * 类型：string + */ + customNextClass: makeStringProp(''), + /** + * 自定义文字标题类名 + * 类型：string + */ + customTextClass: makeStringProp(''), + /** + * 自定义文字标题样式 + * 类型：string + */ + customTextStyle: makeStringProp('') } export type SwiperProps = ExtractPropTypes diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue index efef5029..f5f901e8 100644 --- a/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue +++ b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue @@ -1,9 +1,11 @@ +