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/>
|
<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>
|
></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
|
```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`。
|
通过`value-key` 属性指定 `list` 中每个对象图片地址字段，默认为 `value`。
|
||||||
|
|
||||||
|
通过`text-key` 属性指定 `list` 中每个对象标题字段，默认为 `text`。
|
||||||
|
:::tip 提示
|
||||||
|
当前`swiper`提供的标题样式为顶部靠右，如需自定义样式，请使用外部样式类`customTextClass`或者自定义样式`customTextStyle`，使用`text-key`时请确认你的组件库版本是否包含此功能。
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
```html
|
```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
|
```ts
|
||||||
const current = ref<number>(0)
|
const current = ref<number>(0)
|
||||||
|
|
||||||
const customSwiperList = 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/redpanda.jpg', title: '小熊猫！' },
|
||||||
{ url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg' },
|
{ 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' },
|
{ 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' }
|
{ 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
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
| -------------------- | ------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------ | -------- |
|
| ------------------------- | ------------------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------ | ---------------- |
|
||||||
| autoplay | 是否自动播放 | `boolean` | - | true | 0.1.22 |
|
| autoplay | 是否自动播放 | `boolean` | - | true | 0.1.22 |
|
||||||
| v-model:current | 控制当前轮播在哪一项（下标） | `number` | - | 0 | 0.1.22 |
|
| v-model:current | 控制当前轮播在哪一项（下标） | `number` | - | 0 | 0.1.22 |
|
||||||
| direction | 轮播滑动方向 | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 |
|
| direction | 轮播滑动方向 | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 |
|
||||||
| displayMultipleItems | 同时显示的滑块数量 | `number` | - | 1 | 0.1.22 |
|
| displayMultipleItems | 同时显示的滑块数量 | `number` | - | 1 | 0.1.22 |
|
||||||
| duration | 滑动动画时长 | `number` | - | 300 | 0.1.22 |
|
| duration | 滑动动画时长 | `number` | - | 300 | 0.1.22 |
|
||||||
| easingFunction | 切换缓动动画类型（微信小程序、快手小程序、京东小程序） | `EasingType` | - | default | 0.1.22 |
|
| easingFunction | 切换缓动动画类型（微信小程序、快手小程序、京东小程序） | `EasingType` | - | default | 0.1.22 |
|
||||||
| height | 轮播的高度 | `string \| number` | - | 192 | 0.1.22 |
|
| height | 轮播的高度 | `string \| number` | - | 192 | 0.1.22 |
|
||||||
| interval | 轮播间隔时间 | `number` | - | 5000 | 0.1.22 |
|
| interval | 轮播间隔时间 | `number` | - | 5000 | 0.1.22 |
|
||||||
| list | 图片列表 | `string[] \| SwiperList[]` | - | - | 0.1.22 |
|
| list | 图片列表 | `string[] \| SwiperList[]` | - | - | 0.1.22 |
|
||||||
| loop | 是否循环播放 | `boolean` | - | true | 0.1.22 |
|
| loop | 是否循环播放 | `boolean` | - | true | 0.1.22 |
|
||||||
| nextMargin | 后边距 | `string \| number` | - | 0 | 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 |
|
| 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 |
|
| previousMargin | 前边距 | `string \| number` | - | 0 | 0.1.22 |
|
||||||
| snapToEdge | 边距是否应用到第一个、最后一个元素 | `boolean` | - | false | 0.1.22 |
|
| snapToEdge | 边距是否应用到第一个、最后一个元素 | `boolean` | - | false | 0.1.22 |
|
||||||
| indicator | 指示器全部配置 | `SwiperIndicatorProps \| boolean` | - | true | 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 |
|
| 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 |
|
| 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 |
|
| 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
|
### DirectionType
|
||||||
@ -267,10 +346,15 @@ const isLoop = ref(false)
|
|||||||
|
|
||||||
### SwiperList
|
### SwiperList
|
||||||
|
|
||||||
轮播图项的列表配置，包括 `value` 属性，支持扩展属性。
|
轮播图项的列表配置，包括 图片或视频地址`value`、视频封面`poster` 等属性，支持扩展属性。
|
||||||
|
|
||||||
### SwiperIndicatorProps
|
### 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 |
|
| current | 当前轮播在哪一项（下标） | Number | - | 0 | 0.1.22 |
|
||||||
@ -295,12 +379,18 @@ const isLoop = ref(false)
|
|||||||
| --------- | ------------ | ------------------------------------ | -------- |
|
| --------- | ------------ | ------------------------------------ | -------- |
|
||||||
| indicator | 自定义指示器 | `{ current: number, total: number }` | 0.1.22 |
|
| indicator | 自定义指示器 | `{ current: number, total: number }` | 0.1.22 |
|
||||||
|
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
| 类名 | 说明 | 最低版本 |
|
| 类名 | 说明 | 最低版本 |
|
||||||
| -------------------- | -------------------- | -------- |
|
| -------------------- | -------------------- | -------- |
|
||||||
| customClass | 外部自定义类名 | 0.1.22 |
|
| customClass | 外部自定义类名 | 0.1.22 |
|
||||||
| customIndicatorClass | 自定义指示器类名 | 0.1.22 |
|
| customIndicatorClass | 自定义指示器类名 | 0.1.22 |
|
||||||
| customImageClass | 自定义图片类名 | 0.1.22 |
|
| customImageClass | 自定义图片类名，1.3版本将废弃，请使用`customItemClass`代替 | 0.1.22 |
|
||||||
| customPrevImageClass | 自定义上一个图片类名 | 0.1.22 |
|
| customPrevImageClass | 自定义上一个图片类名，1.3版本将废弃，请使用`customPrevClass`代替 | 0.1.22 |
|
||||||
| customNextImageClass | 自定义下一个图片类名 | 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>
|
></wd-swiper>
|
||||||
</demo-block>
|
</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="手动切换">
|
<demo-block title="手动切换">
|
||||||
<wd-swiper
|
<wd-swiper
|
||||||
:list="swiperList"
|
:list="swiperList"
|
||||||
@ -110,8 +148,16 @@
|
|||||||
</wd-swiper>
|
</wd-swiper>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block title="指定valueKey">
|
<demo-block title="指定valueKey和textKey">
|
||||||
<wd-swiper value-key="url" :list="customSwiperList" autoplay v-model:current="current9" @click="handleClick" @change="onChange"></wd-swiper>
|
<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>
|
||||||
|
|
||||||
<demo-block title="属性控制切换">
|
<demo-block title="属性控制切换">
|
||||||
@ -143,10 +189,17 @@ const swiperList = ref([
|
|||||||
])
|
])
|
||||||
|
|
||||||
const customSwiperList = 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/redpanda.jpg', title: '小熊猫！' },
|
||||||
{ url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg' },
|
{ 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' },
|
{ 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' }
|
{ 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)
|
const current = ref<number>(0)
|
||||||
@ -159,6 +212,7 @@ const current6 = ref<number>(0)
|
|||||||
const current7 = ref<number>(0)
|
const current7 = ref<number>(0)
|
||||||
const current8 = ref<number>(0)
|
const current8 = ref<number>(0)
|
||||||
const current9 = ref<number>(0)
|
const current9 = ref<number>(0)
|
||||||
|
const current10 = ref<number>(0)
|
||||||
|
|
||||||
const isLoop = ref(false)
|
const isLoop = ref(false)
|
||||||
|
|
||||||
@ -187,6 +241,11 @@ function onChange(e: any) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-slot-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.custom-indicator {
|
.custom-indicator {
|
||||||
padding: 0 12rpx;
|
padding: 0 12rpx;
|
||||||
height: 48rpx;
|
height: 48rpx;
|
||||||
|
|||||||
@ -766,6 +766,9 @@ $-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; //
|
|||||||
/* swiper */
|
/* swiper */
|
||||||
$-swiper-radius: var(--wot-swiper-radius, 8px);
|
$-swiper-radius: var(--wot-swiper-radius, 8px);
|
||||||
$-swiper-item-padding: var(--wot-swiper-item-padding, 0);
|
$-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 */
|
/* swiper-nav */
|
||||||
// dot & dots-bar
|
// dot & dots-bar
|
||||||
|
|||||||
@ -3,21 +3,31 @@
|
|||||||
|
|
||||||
@include b(swiper) {
|
@include b(swiper) {
|
||||||
position: relative;
|
position: relative;
|
||||||
@include e(track){
|
|
||||||
|
@include e(track) {
|
||||||
border-radius: $-swiper-radius;
|
border-radius: $-swiper-radius;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include e(item){
|
@include e(item) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: $-swiper-item-padding;
|
padding: $-swiper-item-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include e(image){
|
@include e(image, video) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: all 0.3s ease;
|
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'
|
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 {
|
export interface SwiperList {
|
||||||
[key: string]: any
|
[key: string]: any
|
||||||
|
// 图片、视频等资源地址
|
||||||
value?: string
|
value?: string
|
||||||
|
// 视频资源的封面
|
||||||
|
poster?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const swiperProps = {
|
export const swiperProps = {
|
||||||
@ -107,26 +118,23 @@ export const swiperProps = {
|
|||||||
nextMargin: makeNumericProp('0'),
|
nextMargin: makeNumericProp('0'),
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 页码信息展示位置，可选值：'bottom'（底部）等
|
* 页码信息展示位置，可选值：'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
|
||||||
* 类型：string
|
* 类型：string
|
||||||
* 默认值：'bottom'
|
* 默认值：'bottom'
|
||||||
*/
|
*/
|
||||||
indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
|
indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 前边距
|
* 前边距
|
||||||
* 类型：number 或 string（数字或可转换为数字的字符串）
|
* 类型：number 或 string（数字或可转换为数字的字符串）
|
||||||
* 默认值：'0'
|
* 默认值：'0'
|
||||||
*/
|
*/
|
||||||
previousMargin: makeNumericProp('0'),
|
previousMargin: makeNumericProp('0'),
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否应用边距到第一个、最后一个元素
|
* 是否应用边距到第一个、最后一个元素
|
||||||
* 类型：boolean
|
* 类型：boolean
|
||||||
* 默认值：false
|
* 默认值：false
|
||||||
*/
|
*/
|
||||||
snapToEdge: makeBooleanProp(false),
|
snapToEdge: makeBooleanProp(false),
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 指示器全部配置，可以是布尔值或指示器配置对象
|
* 指示器全部配置，可以是布尔值或指示器配置对象
|
||||||
* 类型：boolean 或 object
|
* 类型：boolean 或 object
|
||||||
@ -147,6 +155,42 @@ export const swiperProps = {
|
|||||||
* 选项对象中，value 对应的 key
|
* 选项对象中，value 对应的 key
|
||||||
*/
|
*/
|
||||||
valueKey: makeStringProp('value'),
|
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
|
* 类型：string
|
||||||
@ -169,7 +213,33 @@ export const swiperProps = {
|
|||||||
* 自定义下一个图片类名
|
* 自定义下一个图片类名
|
||||||
* 类型：string
|
* 类型：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>
|
export type SwiperProps = ExtractPropTypes<typeof swiperProps>
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<view :class="`wd-swiper ${customClass}`" :style="customStyle">
|
<view :class="`wd-swiper ${customClass}`" :style="customStyle">
|
||||||
<swiper
|
<swiper
|
||||||
|
:adjust-height="adjustHeight"
|
||||||
|
:adjust-vertical-height="adjustVerticalHeight"
|
||||||
class="wd-swiper__track"
|
class="wd-swiper__track"
|
||||||
:autoplay="autoplay"
|
:autoplay="autoplay && !videoPlaying"
|
||||||
:current="current"
|
:current="navCurrent"
|
||||||
:interval="interval"
|
:interval="interval"
|
||||||
:duration="duration"
|
:duration="duration"
|
||||||
:circular="loop"
|
:circular="loop"
|
||||||
@ -19,11 +21,28 @@
|
|||||||
>
|
>
|
||||||
<swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item" @click="handleClick(index, item)">
|
<swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item" @click="handleClick(index, item)">
|
||||||
<image
|
<image
|
||||||
|
v-if="isImageUrl(isObj(item) ? item[valueKey] : item)"
|
||||||
:src="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) }"
|
:style="{ height: addUnit(height) }"
|
||||||
:mode="imageMode"
|
: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-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
@ -44,11 +63,21 @@
|
|||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'wd-swiper',
|
||||||
|
options: {
|
||||||
|
addGlobalClass: true,
|
||||||
|
virtualHost: true,
|
||||||
|
styleIsolation: 'shared'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
|
import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
|
||||||
import { computed, watch, ref } from 'vue'
|
import { computed, watch, ref, getCurrentInstance } from 'vue'
|
||||||
import { addUnit, isObj } from '../common/util'
|
import { addUnit, isObj, isImageUrl, isVideoUrl, uuid } from '../common/util'
|
||||||
import { swiperProps, type SwiperList } from './types'
|
import { swiperProps, type SwiperList } from './types'
|
||||||
import type { SwiperNavProps } from '../wd-swiper-nav/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 emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
|
||||||
const navCurrent = ref<number>(0) // 当前滑块
|
const navCurrent = ref<number>(0) // 当前滑块
|
||||||
|
|
||||||
|
const videoPlaying = ref<boolean>(false) // 当前是否在播放视频
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as any
|
||||||
|
|
||||||
|
const uid = ref<string>(uuid())
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.current,
|
() => props.current,
|
||||||
(val) => {
|
(val) => {
|
||||||
@ -99,6 +134,16 @@ function goToEnd() {
|
|||||||
navCurrent.value = props.list.length - 1
|
navCurrent.value = props.list.length - 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 视频播放
|
||||||
|
function handleVideoPaly() {
|
||||||
|
props.stopAutoplayWhenVideoPlay && (videoPlaying.value = true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 视频暂停
|
||||||
|
function handleVideoPause() {
|
||||||
|
videoPlaying.value = false
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否为当前滑块的前一个滑块
|
* 是否为当前滑块的前一个滑块
|
||||||
* @param current
|
* @param current
|
||||||
@ -119,28 +164,74 @@ function isNext(current: number, index: number, list: string[] | SwiperList[]) {
|
|||||||
return (current + 1 + list.length) % list.length === index
|
return (current + 1 + list.length) % list.length === index
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCustomImageClass(current: number, index: number, list: string[] | SwiperList[]) {
|
function getCustomItemClass(current: number, index: number, list: string[] | SwiperList[]) {
|
||||||
let customImageClass: string = ''
|
let customItemClass: string = ''
|
||||||
if (isPrev(current, index, list)) {
|
if (isPrev(current, index, list)) {
|
||||||
customImageClass = props.customPrevImageClass
|
customItemClass = props.customPrevClass || props.customPrevImageClass
|
||||||
}
|
}
|
||||||
if (isNext(current, index, list)) {
|
if (isNext(current, index, list)) {
|
||||||
customImageClass = props.customNextImageClass
|
customItemClass = props.customNextClass || props.customNextImageClass
|
||||||
}
|
}
|
||||||
return customImageClass
|
return customItemClass
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 轮播滑块切换时触发
|
* 轮播滑块切换时触发
|
||||||
* @param e
|
* @param e
|
||||||
*/
|
*/
|
||||||
function handleChange(e: { detail: { current: any; source: string } }) {
|
function handleChange(e: { detail: { current: number; source: string } }) {
|
||||||
const { current, source } = e.detail
|
const { current, source } = e.detail
|
||||||
|
const previous = navCurrent.value
|
||||||
navCurrent.value = current
|
navCurrent.value = current
|
||||||
// #ifndef MP-WEIXIN
|
// #ifndef MP-WEIXIN
|
||||||
emit('update:current', navCurrent.value)
|
emit('update:current', navCurrent.value)
|
||||||
// #endif
|
// #endif
|
||||||
emit('change', { current, source })
|
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