blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-11-21 20:02:08 +08:00
Code Issues Projects Releases Wiki Activity
vant/docs/examples-docs/swipe.md
cookfront 03af3b3eba swipe add indicator
2017-03-27 17:06:30 +08:00

1.8 KiB
Raw Blame History

Swipe 轮播

基础用法

:::demo 基础用法

<zan-swipe>
  <zan-swipe-item>
    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
  </zan-swipe-item>
  <zan-swipe-item>
    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
  </zan-swipe-item>
</zan-swipe>

:::

自动轮播

:::demo 自动轮播

<zan-swipe :auto-play="true" @pagechange:end="handlePageEnd">
  <zan-swipe-item>
    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
  </zan-swipe-item>
  <zan-swipe-item>
    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
  </zan-swipe-item>
</zan-swipe>

:::

API

参数 说明 类型 默认值 可选值
autoPlay 是否自动轮播 boolean false true, false
showIndicators 是否显示指示器 boolean true true, false

事件

事件名 说明 参数
pagechange:end 每一页轮播结束后触发 (elem, currIndex)：elem为触发页当前的DOM节点