Swipe - Vant 4

Swipe

Intro

Used to loop a group of pictures or content.

Install

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

import { createApp } from'vue'; import { Swipe, SwipeItem } from'vant'; const app = createApp(); app.use(Swipe); app.use(SwipeItem);

Usage

Basic Usage

Use autoplay prop to set autoplay interval.

Lazy Render

Use lazy-render prop to enable lazy rendering.

exportdefault { setup() { const images = [ 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg', ]; return { images }; }, };

Change Event

import { showToast } from'vant'; exportdefault { setup() { constonChange = (index) => showToast('Current Swipe index:' + index); return { onChange }; }, };

Vertical Scrolling

Set SwipeItem Size

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

Custom Indicator

API

Swipe Props

Attribute	Description	Type	Default
autoplay	Autoplay interval (ms)	*number	string*
duration	Animation duration (ms)	*number	string*
initial-swipe	Index of initial swipe, start from 0	*number	string*
width	Width of swipe item	*number	string*
height	Height of swipe item	*number	string*
loop	Whether to enable loop	boolean	true
show-indicators	Whether to show indicators	boolean	true
vertical	Whether to be vertical Scrolling	boolean	false
touchable	Whether to allow swipe by touch gesture	boolean	true
stop-propagation	Whether to stop touchmove event propagation	boolean	false
lazy-render	Whether to enable lazy render	boolean	false
indicator-color	Indicator color	string	#1989fa

Swipe Events

Event	Description	Arguments
change	Emitted when current swipe changed	index: number
drag-start v4.0.9	Emitted when user starts dragging the swipe	{ index: number }
drag-end v4.0.9	Emitted when user ends dragging the swipe	{ index: number }

SwipeItem Events

Event	Description	Arguments
click	Emitted when component is clicked	event: MouseEvent

Swipe Methods

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

Name	Description	Attribute	Return value
prev	Swipe to prev item	-	-
next	Swipe to next item	-	-
swipeTo	Swipe to target index	index: number, options: SwipeToOptions	-
resize	Resize Swipe when container element resized or visibility changed	-	-

Types

The component exports the following type definitions:

importtype { SwipeProps, SwipeInstance, SwipeToOptions } from'vant';

SwipeInstance is the type of component instance:

import { ref } from'vue'; importtype { SwipeInstance } from'vant'; const swipeRef = ref<SwipeInstance>(); swipeRef.value?.next();

SwipeToOptions

Name	Description	Type
immediate	Whether to skip animation	boolean

Swipe Slots

Name	Description	SlotProps
default	Content	-
indicator	Custom indicator	{ active: number, total: number }

Theming

CSS Variables

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

Name	Default Value	Description
--van-swipe-indicator-size	6px	-
--van-swipe-indicator-margin	var(--van-padding-sm)	-
--van-swipe-indicator-active-opacity	1	-
--van-swipe-indicator-inactive-opacity	0.3	-
--van-swipe-indicator-active-background	var(--van-primary-color)	-
--van-swipe-indicator-inactive-background	var(--van-border-color)	-