mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ Swiper 轮播组件支持展示视频和设置轮播项标题 (#663)
This commit is contained in:
不如摸鱼去
GitHub
parent
60b07e514b
commit
a50c0be384
@ -1,8 +1,12 @@
|
||||
<frame/>
|
||||
|
||||
# Swiper 轮播图 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">0.1.22</el-tag>
|
||||
# Swiper 轮播
|
||||
|
||||
用于创建轮播图，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置。
|
||||
用于创建轮播，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置，支持视频和图片资源的轮播，支持设置轮播标题和自定义标题样式。
|
||||
|
||||
:::danger 请注意
|
||||
嵌入视频仅在`h5`、`微信小程序`和`钉钉小程序`支持，其余端不支持，请了解后使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
@ -50,6 +54,60 @@ function onChange(e) {
|
||||
></wd-swiper>
|
||||
```
|
||||
|
||||
## 视频轮播<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">1.3.13</el-tag>
|
||||
|
||||
:::danger 请注意
|
||||
嵌入视频仅在`h5`、`微信小程序`和`钉钉小程序`支持，其余端不支持，请了解后使用。
|
||||
:::
|
||||
|
||||
```html
|
||||
<wd-swiper :list="videoList" autoplay :indicator="false" indicator-position="bottom-right"></wd-swiper>
|
||||
```
|
||||
|
||||
```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
|
||||
<wd-swiper :list="videoList" autoplay :autoplayVideo="false" :indicator="{ type: 'fraction' }" indicator-position="top-right"></wd-swiper>
|
||||
```
|
||||
|
||||
```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
|
||||
<wd-swiper
|
||||
:list="videoList"
|
||||
autoplay
|
||||
stopAutoplayWhenVideoPlay
|
||||
:autoplayVideo="false"
|
||||
:indicator="{ type: 'fraction' }"
|
||||
indicator-position="top-right"
|
||||
></wd-swiper>
|
||||
```
|
||||
|
||||
```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 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">1.3.7</el-tag>
|
||||
## 指定valueKey和textKey
|
||||
|
||||
通过`value-key` 属性指定 `list` 中每个对象图片地址字段，默认为 `value`。
|
||||
|
||||
通过`text-key` 属性指定 `list` 中每个对象标题字段，默认为 `text`。
|
||||
:::tip 提示
|
||||
当前`swiper`提供的标题样式为顶部靠右，如需自定义样式，请使用外部样式类`customTextClass`或者自定义样式`customTextStyle`，使用`text-key`时请确认你的组件库版本是否包含此功能。
|
||||
:::
|
||||
|
||||
|
||||
```html
|
||||
<wd-swiper value-key="url" :list="customSwiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
|
||||
<wd-swiper value-key="url" text-key="title" :custom-text-style="color:#fff" :list="customSwiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
|
||||
```
|
||||
```ts
|
||||
const current = ref<number>(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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 属性控制切换
|
||||
@ -232,7 +304,7 @@ 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 |
|
||||
@ -249,8 +321,15 @@ const isLoop = ref(false)
|
||||
| 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 |
|
||||
| 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$ |
|
||||
|
||||
@ -34,6 +34,44 @@
|
||||
></wd-swiper>
|
||||
</demo-block>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN || H5 || MP-DINGTALK -->
|
||||
<demo-block title="视频轮播">
|
||||
<wd-swiper
|
||||
:list="videoList"
|
||||
autoplay
|
||||
:indicator="{ type: 'fraction' }"
|
||||
indicator-position="top-right"
|
||||
@click="handleClick"
|
||||
@change="onChange"
|
||||
></wd-swiper>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="手动播放视频">
|
||||
<wd-swiper
|
||||
:list="videoList"
|
||||
autoplay
|
||||
:autoplayVideo="false"
|
||||
:indicator="{ type: 'fraction' }"
|
||||
indicator-position="top-right"
|
||||
@click="handleClick"
|
||||
@change="onChange"
|
||||
></wd-swiper>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="播放视频时停止轮播">
|
||||
<wd-swiper
|
||||
:list="videoList"
|
||||
autoplay
|
||||
stopAutoplayWhenVideoPlay
|
||||
:autoplayVideo="false"
|
||||
:indicator="{ type: 'fraction' }"
|
||||
indicator-position="top-right"
|
||||
@click="handleClick"
|
||||
@change="onChange"
|
||||
></wd-swiper>
|
||||
</demo-block>
|
||||
<!-- #endif -->
|
||||
|
||||
<demo-block title="手动切换">
|
||||
<wd-swiper
|
||||
:list="swiperList"
|
||||
@ -110,8 +148,16 @@
|
||||
</wd-swiper>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="指定valueKey">
|
||||
<wd-swiper value-key="url" :list="customSwiperList" autoplay v-model:current="current9" @click="handleClick" @change="onChange"></wd-swiper>
|
||||
<demo-block title="指定valueKey和textKey">
|
||||
<wd-swiper
|
||||
value-key="url"
|
||||
text-key="title"
|
||||
:list="customSwiperList"
|
||||
autoplay
|
||||
v-model:current="current9"
|
||||
@click="handleClick"
|
||||
@change="onChange"
|
||||
></wd-swiper>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="属性控制切换">
|
||||
@ -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<number>(0)
|
||||
@ -159,6 +212,7 @@ const current6 = ref<number>(0)
|
||||
const current7 = ref<number>(0)
|
||||
const current8 = ref<number>(0)
|
||||
const current9 = ref<number>(0)
|
||||
const current10 = ref<number>(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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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<IndicatorPositionType>('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<AdjustHeightType>('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<typeof swiperProps>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<view :class="`wd-swiper ${customClass}`" :style="customStyle">
|
||||
<swiper
|
||||
:adjust-height="adjustHeight"
|
||||
:adjust-vertical-height="adjustVerticalHeight"
|
||||
class="wd-swiper__track"
|
||||
:autoplay="autoplay"
|
||||
:current="current"
|
||||
:autoplay="autoplay && !videoPlaying"
|
||||
:current="navCurrent"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
:circular="loop"
|
||||
@ -19,11 +21,28 @@
|
||||
>
|
||||
<swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item" @click="handleClick(index, item)">
|
||||
<image
|
||||
v-if="isImageUrl(isObj(item) ? item[valueKey] : item)"
|
||||
:src="isObj(item) ? item[valueKey] : item"
|
||||
:class="`wd-swiper__image ${customImageClass} ${getCustomImageClass(navCurrent, index, list)}`"
|
||||
:class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(navCurrent, index, list)}`"
|
||||
:style="{ height: addUnit(height) }"
|
||||
:mode="imageMode"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
:id="`video-${index}-${uid}`"
|
||||
:style="{ height: addUnit(height) }"
|
||||
:src="isObj(item) ? item[valueKey] : item"
|
||||
:poster="isObj(item) ? item.poster : ''"
|
||||
:class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(navCurrent, index, list)}`"
|
||||
@play="handleVideoPaly"
|
||||
@pause="handleVideoPause"
|
||||
:enable-progress-gesture="false"
|
||||
loop
|
||||
muted
|
||||
:autoplay="autoplayVideo"
|
||||
objectFit="cover"
|
||||
/>
|
||||
<text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">{{ item[textKey] }}</text>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
@ -44,11 +63,21 @@
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-swiper',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
|
||||
import { computed, watch, ref } from 'vue'
|
||||
import { addUnit, isObj } from '../common/util'
|
||||
import { computed, watch, ref, getCurrentInstance } from 'vue'
|
||||
import { addUnit, isObj, isImageUrl, isVideoUrl, uuid } from '../common/util'
|
||||
import { swiperProps, type SwiperList } from './types'
|
||||
import type { SwiperNavProps } from '../wd-swiper-nav/types'
|
||||
|
||||
@ -56,6 +85,12 @@ const props = defineProps(swiperProps)
|
||||
const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
|
||||
const navCurrent = ref<number>(0) // 当前滑块
|
||||
|
||||
const videoPlaying = ref<boolean>(false) // 当前是否在播放视频
|
||||
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
const uid = ref<string>(uuid())
|
||||
|
||||
watch(
|
||||
() => props.current,
|
||||
(val) => {
|
||||
@ -99,6 +134,16 @@ function goToEnd() {
|
||||
navCurrent.value = props.list.length - 1
|
||||
}
|
||||
|
||||
// 视频播放
|
||||
function handleVideoPaly() {
|
||||
props.stopAutoplayWhenVideoPlay && (videoPlaying.value = true)
|
||||
}
|
||||
|
||||
// 视频暂停
|
||||
function handleVideoPause() {
|
||||
videoPlaying.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否为当前滑块的前一个滑块
|
||||
* @param current
|
||||
@ -119,28 +164,74 @@ function isNext(current: number, index: number, list: string[] | SwiperList[]) {
|
||||
return (current + 1 + list.length) % list.length === index
|
||||
}
|
||||
|
||||
function getCustomImageClass(current: number, index: number, list: string[] | SwiperList[]) {
|
||||
let customImageClass: string = ''
|
||||
function getCustomItemClass(current: number, index: number, list: string[] | SwiperList[]) {
|
||||
let customItemClass: string = ''
|
||||
if (isPrev(current, index, list)) {
|
||||
customImageClass = props.customPrevImageClass
|
||||
customItemClass = props.customPrevClass || props.customPrevImageClass
|
||||
}
|
||||
if (isNext(current, index, list)) {
|
||||
customImageClass = props.customNextImageClass
|
||||
customItemClass = props.customNextClass || props.customNextImageClass
|
||||
}
|
||||
return customImageClass
|
||||
return customItemClass
|
||||
}
|
||||
|
||||
/**
|
||||
* 轮播滑块切换时触发
|
||||
* @param e
|
||||
*/
|
||||
function handleChange(e: { detail: { current: any; source: string } }) {
|
||||
function handleChange(e: { detail: { current: number; source: string } }) {
|
||||
const { current, source } = e.detail
|
||||
const previous = navCurrent.value
|
||||
navCurrent.value = current
|
||||
// #ifndef MP-WEIXIN
|
||||
emit('update:current', navCurrent.value)
|
||||
// #endif
|
||||
emit('change', { current, source })
|
||||
handleVideoChange(previous, current)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理视频切换
|
||||
*/
|
||||
function handleVideoChange(previous: number, current: number) {
|
||||
handleStopVideoPaly(previous)
|
||||
handleStartVideoPaly(current)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始播放指定视频
|
||||
* @param index
|
||||
*/
|
||||
function handleStartVideoPaly(index: number) {
|
||||
if (props.autoplayVideo) {
|
||||
const currentItem = props.list[index]
|
||||
if (currentItem) {
|
||||
const url = isObj(currentItem) ? currentItem.url : currentItem
|
||||
if (isVideoUrl(url)) {
|
||||
const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
|
||||
video.play()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 停止播放指定视频
|
||||
* @param index
|
||||
*/
|
||||
function handleStopVideoPaly(index: number) {
|
||||
if (props.stopPreviousVideo) {
|
||||
const previousItem = props.list[index]
|
||||
if (previousItem) {
|
||||
const url = isObj(previousItem) ? previousItem.url : previousItem
|
||||
if (isVideoUrl(url)) {
|
||||
const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
|
||||
video.pause()
|
||||
}
|
||||
}
|
||||
} else if (props.stopAutoplayWhenVideoPlay) {
|
||||
handleVideoPause()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user