轮播 Swiper

轮播组件。

重要提示

重要提示

需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

数据驱动方式

• 通过 list 属性设置数据。
• 通过 current 属性设置当前索引。
• 通过 @change 事件监听切换事件，监听到切换事件后。获取新的索引，最后更新索引。

<template>
    <pure-swiper
        :list="list"
        :current="current"
        @change="(e) => (current = e.detail.current)"
    ></pure-swiper>
</template>

自定义内容方式

提示

此种方式也需要给组件传递 list 和 current 属性。

<template>
    <pure-swiper :list="list" :current="current" @change="handleChange">
        <swiper-item class="swiper-item" v-for="(_item, _index) in list" :key="_index">
            <view class="swiper-item-content">
                <pure-image
                    :src="_item.src"
                    :placeholder="_item.src"
                    mode="aspectFill"
                    width="100%"
                    height="100%"
                ></pure-image>
            </view>
        </swiper-item>
    </pure-swiper>
</template>

指示器

• 通过 indicator 属性设置是否显示指示器。
• 通过 indicatorMode 属性设置指示器模式。

<template>
    <pure-swiper
        :list="list"
        :current="current"
        indicator
        indicatorMode="bar"
    ></pure-swiper>
</template>

切换按钮

• 通过 arrow 属性设置是否显示切换按钮。

<template>
    <pure-swiper
        :list="list"
        :current="current"
        arrow
    ></pure-swiper>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
list	数据	Array	[]	-	+1.0.0
current	激活项下标	Number	0	-	+1.0.0
mediaKey	媒体资源的路径字段名，同 <pure-image> 组件的 [src](./image.md#props) 属性	String	src	-	+1.0.0
placeholderKey	占位媒体资源的路径字段名，同 <pure-image> 组件的 [placeholder](./image.md#props) 属性	String	placeholder	-	+1.0.0
mediaMode	媒体资源的裁剪模式，同 <pure-image> 组件的 [mode](./image.md#props) 属性	String	placeholder	-	+1.0.0
indicator	是否显示指示器	Boolean	false	-	+1.0.0
indicatorMode	指示器模式，同 <pure-indicator> 组件的 [mode](./indicator.md#props) 属性	String	dot	bar、line、number、index、title、progress	+1.0.0
separator	number 指示器的分隔符，同 <pure-indicator> 组件的 [separator](./indicator.md#props) 属性	String	/	-	+1.0.0
titleKey	title 指示器的字段名，同 <pure-indicator> 组件的 [titleKey](./indicator.md#props) 属性	String	title	-	+1.0.0
indicatorHoverClass	指示器的 hover-class，同 <pure-indicator> 组件的 [hoverClass](./indicator.md#props) 属性	String	undefined	-	+1.0.0
arrow	是否显示切换按钮	Boolean	false	-	+1.0.0
prevIcon	后退按钮的图标名称，同 <pure-prev-next> 组件的 [prevIcon](./prev-next.md#props) 属性	String	undefined	-	+1.0.0
nextIcon	前进按钮的图标名称，同 <pure-prev-next> 组件的 [nextIcon](./prev-next.md#props) 属性	String	undefined	-	+1.0.0
arrowDisabledClass	切换按钮禁用时的 class，同 <pure-prev-next> 组件的 [disabledClass](./prev-next.md#props) 属性	String	undefined	-	+1.0.0
arrowHoverClass	切换按钮的 hover-class，同 <pure-prev-next> 组件的 [hoverClass](./prev-next.md#props) 属性	String	undefined	-	+1.0.0
disabledClass	swiper item 禁用时的 class	String	pure-disabled	-	+1.0.0
activedClass	swiper item 激活时项 class	String	pure-swiper-item-actived	-	+1.0.0
inactivedClass	swiper item 未激活项的 class	String	pure-swiper-item-inactived	-	+1.0.0
formatItemClass	swiper item 自定义 class 格式化函数，在自定义个性化轮播时用来给不同的 swiper item 设置不同的 class	Function	null	-	+1.0.0
imageOpts	图片的其他配置，同 <pure-image> 组件的 [props](./image#props)	Object	null	-	+1.0.0
width	轮播宽度，注意：只是轮播宽度，如果指示器或者切换按钮设置为静态布局，不会占用此宽度	String	-	-	+1.0.0
height	轮播高度，注意：只是轮播高度，如果指示器或者切换按钮设置为静态布局，不会占用此高度	String	-	-	+1.0.0
<swiper> 组件的原生属性	参考	-	-	-	+1.0.0

Event

事件名	说明	回调参数	版本
change	切换事件	event: event.detail = {current: current, source: source}	+1.0.0
transition	swiper-item 的位置发生改变时会触发 transition 事件	event: event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	+1.0.0
animationfinish	动画结束时会触发 animationfinish 事件	event: event.detail = {current: current, source: source}	+1.0.0
itemClick	swiper item 点击事件	index: 被点击项的下标。item: 被点击项的数据。	+1.0.0
prev	后退按钮点击事件	index: 后退后的新下标。	+1.0.0
next	前进按钮点击事件	index: 前进后的新下标。	+1.0.0
indicatorItemClick	指示器 item 点击事件	index: 被点击 item 的下标	+1.0.0

Slots

名称	说明	参数	版本
default	默认，自定义 item	-	+1.0.0
indicator	自定义指示器	-	+1.0.0
arrow	自定义切换按钮	-	+1.0.0