admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 09:08:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ swiper新增default slot 用户可自定义swiper-item中的内容展示 (#1164)

Browse Source 
* feat: ✨ swiper新增default slot 用户可自定义swiper-item中的内容展示

* docs: ✏️ 补充swiper组件使用说明
This commit is contained in:
Jts Al 2025-09-15 21:50:06 +08:00 committed by GitHub
parent 7466c91c1a
commit 046b135a14
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/component/swiper.md
View File

@ -299,6 +299,24 @@ const current = ref <number>(0)
const isLoop = ref(false)
```
## slot插槽自定义内容
```html
<wd-swiper
:list="swiperList"
autoplay
v-model:current="current"
:indicator="{ type: 'dots' }"
@click="handleClick"
@change="onChange"
>
<template v-slot="{ item, index }">
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ index + 1 }}/{{ item }}</view>
</template>
</wd-swiper>
```
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@ -384,6 +402,7 @@ const isLoop = ref(false)
| name | 说明 | 参数 | 最低版本 |
| --------- | ------------ | ------------------------------------ | -------- |
| indicator | 自定义指示器 | `{ current: number, total: number }` | 0.1.22 |
| default | item展示内容 | `{ item: any, index: number }` | 0.1.22 |
## 外部样式类

55
src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
View File

@ -23,32 +23,35 @@
@animationfinish="handleAnimationfinish"
>
<swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item">
<video
v-if="isVideo(item)"
: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(currentValue, index, list)}`"
@play="handleVideoPaly"
@pause="handleVideoPause"
:enable-progress-gesture="false"
:loop="videoLoop"
:muted="muted"
:autoplay="autoplayVideo"
objectFit="cover"
@click="handleClick(index, item)"
/>
<image
v-else
:src="isObj(item) ? item[valueKey] : item"
:class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
:style="{ height: addUnit(height) }"
:mode="imageMode"
@click="handleClick(index, item)"
/>
<text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">{{ item[textKey] }}</text>
<slot :item="item" :index="index">
<video
v-if="isVideo(item)"
: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(currentValue, index, list)}`"
@play="handleVideoPaly"
@pause="handleVideoPause"
:enable-progress-gesture="false"
:loop="videoLoop"
:muted="muted"
:autoplay="autoplayVideo"
objectFit="cover"
@click="handleClick(index, item)"
/>
<image
v-else
:src="isObj(item) ? item[valueKey] : item"
:class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
:style="{ height: addUnit(height) }"
:mode="imageMode"
@click="handleClick(index, item)"
/>
<text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">
{{ item[textKey] }}
</text>
</slot>
</swiper-item>
</swiper>
<!-- #ifdef MP-WEIXIN -->