左/右切换器 PrevNext

左/右切换器组件。

兼容性

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

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

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

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 prevIcon 属性设置后退按钮图标。
• 通过 nextIcon 属性设置前进按钮图标。
• 通过 prevDisabled 属性设置后退按钮是否禁用，可以接受 auto、true、false，当设置为 auto 时需要传入 count 和 current 属性。
• 通过 nextDisabled 属性设置前进按钮是否禁用，可以接受 auto、true、false，当设置为 auto 时需要传入 count 和 current 属性。
• 通过 count 属性设置按钮总页数。
• 通过 current 属性设置当前页数。

<template>
    <pure-prev-next
        @prev="handlePrev"
        @next="handleNext"
        :count="list.length"
        :current="current"
    ></pure-prev-next>
</template>

按钮位置

• 通过添加辅助类来实现按钮不同位置布局的样式。

提示

辅助类使用规则

<template>
    <!-- 默认：居中 -->
    <pure-prev-next class="pure-prev-next-middle"></pure-prev-next>
    <!-- 居上 -->
    <pure-prev-next class="pure-prev-next-top"></pure-prev-next>
    <!-- 居下 -->
    <pure-prev-next class="pure-prev-next-bottom"></pure-prev-next>
    <!-- 左上 -->
    <pure-prev-next class="pure-prev-left-top"></pure-prev-next>
    <!-- 左下 -->
    <pure-prev-next class="pure-prev-left-bottom"></pure-prev-next>
    <!-- 右上 -->
    <pure-prev-next class="pure-prev-right-top"></pure-prev-next>
    <!-- 右下 -->
    <pure-prev-next class="pure-prev-right-bottom"></pure-prev-next>
    <!-- 中上 -->
    <pure-prev-next class="pure-prev-center-top"></pure-prev-next>
    <!-- 中下 -->
    <pure-prev-next class="pure-prev-center-bottom"></pure-prev-next>
</template>

收缩布局

• 组件默认是通栏布局的，如果需要收缩布局，可以添加 pure-prev-next-shrink 类。

提示

辅助类使用规则

<template>
    <pure-prev-next class="pure-prev-next-shrink"></pure-prev-next>
</template>

静态布局

• 组件默认是 position: absolute 的，如果需要静态布局，可以添加 pure-prev-next-static 类。

提示

辅助类使用规则

<template>
    <pure-prev-next class="pure-prev-next-static"></pure-prev-next>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
prevIcon	后退按钮图标名称，同图标组件（Icon）的 name 属性，参考	String	__zuo2	-	+1.0.0
prevIcon	前进按钮图标名称，同图标组件（Icon）的 name 属性，参考	String	__you2	-	+1.0.0
prevDisabled	禁用后退按钮	[Boolean, String]	auto	true、false、auto	+1.0.0
nextDisabled	禁用前进按钮	[Boolean, String]	auto	true、false、auto	+1.0.0
disabledClass	禁用类名	String	pure-prev-next-disabled	-	+1.0.0
count	总数量	Number	0	-	+1.0.0
current	当前下标	Number	0	-	+1.0.0
loop	是否循环模式，循环模式下自动计算是否禁用时会一直为 true	Boolean	false	-	+1.0.0

Event

事件名	说明	回调参数	版本
prev	后退事件	index: 后退后的下标，如果未传入 count 和 current，参数会是 -1	+1.0.0
next	前进事件	index: 后退后的下标，如果未传入 count 和 current，参数会是 -1	+1.0.0