/*! For license information please see 6386.5a6bfe61.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["6386"],{48176:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Swipe

\n

Intro

\n

Used to loop a group of pictures or content.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Swipe, SwipeItem } from 'vant';\n\nconst app = createApp();\napp.use(Swipe);\napp.use(SwipeItem);\n
\n

Usage

\n

Basic Usage

\n

Use autoplay prop to set autoplay interval.

\n
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">\n  <van-swipe-item>1</van-swipe-item>\n  <van-swipe-item>2</van-swipe-item>\n  <van-swipe-item>3</van-swipe-item>\n  <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n\n<style>\n  .my-swipe .van-swipe-item {\n    color: #fff;\n    font-size: 20px;\n    line-height: 150px;\n    text-align: center;\n    background-color: #39a9ed;\n  }\n</style>\n
\n

Lazy Render

\n

Use lazy-render prop to enable lazy rendering.

\n
<van-swipe :autoplay="3000" lazy-render>\n  <van-swipe-item v-for="image in images" :key="image">\n    <img :src="image" />\n  </van-swipe-item>\n</van-swipe>\n
\n
export default {\n  setup() {\n    const images = [\n      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n    ];\n    return { images };\n  },\n};\n
\n

Change Event

\n
<van-swipe @change="onChange">\n  <van-swipe-item>1</van-swipe-item>\n  <van-swipe-item>2</van-swipe-item>\n  <van-swipe-item>3</van-swipe-item>\n  <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n
import { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const onChange = (index) => showToast('Current Swipe index:' + index);\n    return { onChange };\n  },\n};\n
\n

Vertical Scrolling

\n
<van-swipe :autoplay="3000" vertical>\n  <van-swipe-item>1</van-swipe-item>\n  <van-swipe-item>2</van-swipe-item>\n  <van-swipe-item>3</van-swipe-item>\n  <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n

Set SwipeItem Size

\n
<van-swipe :loop="false" :width="300">\n  <van-swipe-item>1</van-swipe-item>\n  <van-swipe-item>2</van-swipe-item>\n  <van-swipe-item>3</van-swipe-item>\n  <van-swipe-item>4</van-swipe-item>\n</van-swipe>\n
\n
\n

It\'s not supported to set SwipeItem size in the loop mode.

\n
\n

Custom Indicator

\n
<van-swipe>\n  <van-swipe-item>1</van-swipe-item>\n  <van-swipe-item>2</van-swipe-item>\n  <van-swipe-item>3</van-swipe-item>\n  <van-swipe-item>4</van-swipe-item>\n  <template #indicator="{ active, total }">\n    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>\n  </template>\n</van-swipe>\n\n<style>\n  .custom-indicator {\n    position: absolute;\n    right: 5px;\n    bottom: 5px;\n    padding: 2px 5px;\n    font-size: 12px;\n    background: rgba(0, 0, 0, 0.1);\n  }\n</style>\n
\n

API

\n

Swipe Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
autoplayAutoplay interval (ms)number | string-
durationAnimation duration (ms)number | string500
initial-swipeIndex of initial swipe, start from 0number | string0
widthWidth of swipe itemnumber | string0
heightHeight of swipe itemnumber | string0
loopWhether to enable loopbooleantrue
show-indicatorsWhether to show indicatorsbooleantrue
verticalWhether to be vertical Scrollingbooleanfalse
touchableWhether to allow swipe by touch gesturebooleantrue
stop-propagationWhether to stop touchmove event propagationbooleanfalse
lazy-renderWhether to enable lazy renderbooleanfalse
indicator-colorIndicator colorstring#1989fa
\n

Swipe Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
changeEmitted when current swipe changedindex: number
drag-start v4.0.9Emitted when user starts dragging the swipe{ index: number }
drag-end v4.0.9Emitted when user ends dragging the swipe{ index: number }
\n

SwipeItem Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when component is clickedevent: MouseEvent
\n

Swipe Methods

\n

Use ref to get Swipe instance and call instance methods..

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
prevSwipe to prev item--
nextSwipe to next item--
swipeToSwipe to target indexindex: number, options: SwipeToOptions-
resizeResize Swipe when container element resized or visibility changed--
\n

Types

\n

The component exports the following type definitions:

\n
import type { SwipeProps, SwipeInstance, SwipeToOptions } from 'vant';\n
\n

SwipeInstance is the type of component instance:

\n
import { ref } from 'vue';\nimport type { SwipeInstance } from 'vant';\n\nconst swipeRef = ref<SwipeInstance>();\n\nswipeRef.value?.next();\n
\n

SwipeToOptions

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionType
immediateWhether to skip animationboolean
\n

Swipe Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
defaultContent-
indicatorCustom indicator{ active: number, total: number }
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-swipe-indicator-size6px-
--van-swipe-indicator-marginvar(--van-padding-sm)-
--van-swipe-indicator-active-opacity1-
--van-swipe-indicator-inactive-opacity0.3-
--van-swipe-indicator-active-backgroundvar(--van-primary-color)-
--van-swipe-indicator-inactive-backgroundvar(--van-border-color)-
\n
'},null,8,e))}}}]);