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) 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 ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@ -384,6 +402,7 @@ const isLoop = ref(false)
| name | 说明 | 参数 | 最低版本 | | name | 说明 | 参数 | 最低版本 |
| --------- | ------------ | ------------------------------------ | -------- | | --------- | ------------ | ------------------------------------ | -------- |
| indicator | 自定义指示器 | `{ current: number, total: number }` | 0.1.22 | | 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" @animationfinish="handleAnimationfinish"
> >
<swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item"> <swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item">
<video <slot :item="item" :index="index">
v-if="isVideo(item)" <video
:id="`video-${index}-${uid}`" v-if="isVideo(item)"
:style="{ height: addUnit(height) }" :id="`video-${index}-${uid}`"
:src="isObj(item) ? item[valueKey] : item" :style="{ height: addUnit(height) }"
:poster="isObj(item) ? item.poster : ''" :src="isObj(item) ? item[valueKey] : item"
:class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`" :poster="isObj(item) ? item.poster : ''"
@play="handleVideoPaly" :class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
@pause="handleVideoPause" @play="handleVideoPaly"
:enable-progress-gesture="false" @pause="handleVideoPause"
:loop="videoLoop" :enable-progress-gesture="false"
:muted="muted" :loop="videoLoop"
:autoplay="autoplayVideo" :muted="muted"
objectFit="cover" :autoplay="autoplayVideo"
@click="handleClick(index, item)" objectFit="cover"
/> @click="handleClick(index, item)"
<image />
v-else <image
:src="isObj(item) ? item[valueKey] : item" v-else
:class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`" :src="isObj(item) ? item[valueKey] : item"
:style="{ height: addUnit(height) }" :class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
:mode="imageMode" :style="{ height: addUnit(height) }"
@click="handleClick(index, item)" :mode="imageMode"
/> @click="handleClick(index, item)"
/>
<text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">{{ item[textKey] }}</text> <text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">
{{ item[textKey] }}
</text>
</slot>
</swiper-item> </swiper-item>
</swiper> </swiper>
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->