Vant Swipe is on wheels

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

Code demo

Basic usage

Each SwipeItem represents a carnation card that can be spaced automatically by using the autoplay property

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

The picture is lazy to load

When Swipe contains pictures, you can work with the Lazyload component to implement lazy picture loading

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>

import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  }
}

Listen for change events

<van-swipe @change="onChange">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

import { Toast } from 'vant';

export default {
  methods: {
    onChange(index) {
      Toast('当前 Swipe 索引：' + index);
    }
  }
}

Scroll vertically

When you set the vertical property, the slider is arranged vertically, and you need to specify the height of the slider container

<van-swipe style="height: 200px;" vertical>
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

Customize the slider size

The slider is 100% by default, and you can set the width of a single slider with the width property. In portrait scroll mode, you can set the height of a single slider with the height attribute.

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

Custom slider sizes in loop scroll mode are not currently supported, so you need to set loop to false

Custom indicator

The style of the indicator can be customized through the inserter slot

<van-swipe @change="onChange">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>

  <div class="custom-indicator" slot="indicator">
    {{ current + 1 }}/4
  </div>
</van-swipe>

export default {
  data() {
    return {
      current: 0
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    }
  }
}

Api

Swipe Props

Parameters	Description	Type	The default
autoplay	Autocarncast interval in ms	number \| string	-
duration	The length of the animation, in ms	number \| string	`500`
initial-swipe	The initial location index value	number \| string	`0`
width	Slider width in `px`	number \| string	`auto`
height	Slider height in `px`	number \| string	`auto`
loop	Whether to turn on loop playback	boolean	`true`
show-indicators	Whether to display an indicator	boolean	`true`
vertical	Whether to scroll vertically	boolean	`false`
touchable	Whether you can swipe through gestures	boolean	`true`
stop-propagation `v2.2.13`	Whether to prevent sliding events from bubbling	boolean	`true`
indicator-color	The color of the indicator	string	`#1989fa`

Swipe Events

The name of the event	Description	Callback parameters
change	Triggered at the end of each page of the rotation	index, the index of the current page

SwipeItem Events

The name of the event	Description	Callback parameters
Click	Triggered when clicked	event: Event

The Swipe method

Ref allows you to get to the Swipe instance and call the instance method, as detailed in the component instance method

The method name	Description	Parameters	Returns a value
prev `v2.4.2`	Switch to the last rotation	-	-
next `v2.4.2`	Switch to the next rotation	-	-
swipeTo	Switch to the specified location	index: number, options: Options	void
resize `v2.2.14`	This method can be called to trigger a redraw after the size of the outer element has changed	-	void

SwipeTo Options format

Name	Description	Type
immediate	Whether to skip the animation	boolean

Swipe Slots

Name	Description
default	The content of the rotation
indicator	Custom indicator

Problems

Why is the click event triggered when I swipe a wheelcast?

This is usually caused by the introduction of the fastclick library in the project. Fastclick's principle is to simulate a click event through the Touch event, and swipe internal default prevents the touchmove event from bubbling, interfering with fastclick's judgment, causing the problem.

Setting the stop-propagation property of the Swipe component to false avoids the problem.

Can't operate components on the desktop side?

See Use on the desktop side.