blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity
vant/docs/examples-docs/zh-CN/swipe.md
neverland 74a3eea203
[new feature] Swipe add 'initialSwipe' prop (#279) 
* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

* [new feature] Notice bar support more props

* [bugfix] PullRefresh test cases

* [bugfix] unused NoticeBar style

* [bugfix] Swipe width calc error

* [Doc] english document of all action components

* [Doc] change document site path to /zanui/vant

* [Doc] fix

* [bugfix] uploader style error

* [bugfix] tabs document demo

* [new feature] Cell support vue-router target route

* [bugfix] add cell test cases

* update yarn.lock

* [bugfix] Tabbar cann't display info when use icon slot

* [Doc] update document title

* [bugfix] Dialog should reset button text when showed

* [new feature] CouponList add showCloseButton prop

* [new feature] Swipe add 'initialSwipe' prop
2017-11-03 04:50:58 -05:00

2.5 KiB
Raw Blame History

Swipe 轮播

使用指南

import { Swipe, SwipeItem } from 'vant';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

代码演示

基础用法

通过autoplay属性设置自动轮播间隔

:::demo 基础用法

<van-swipe :autoplay="3000">
  <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>

:::

图片懒加载

配合 Lazyload 组件实现图片懒加载

:::demo 图片懒加载

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

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

:::

API

参数 说明 类型 默认值 可选值
autoplay 自动轮播间隔，单位为 ms Number - -
duration 动画时长，单位为 ms Number 500 -
showIndicators 是否显示指示器 Boolean true -
initialSwipe 初始位置，从 0 开始算 Number 0 -

事件

事件名 说明 参数
change 每一页轮播结束后触发 index, 当前页的索引