Swipe

轮播。

引入

  1. import { Swipe, SwipeItem } from 'we-vue'
  3. Vue.use(Swipe).use(SwipeItem)

例子

基础示例

  1. <wv-swipe :height="130" :autoplay="4000">
  2.   <wv-swipe-item style="background-color: #f44336">1</wv-swipe-item>
  3.   <wv-swipe-item style="background-color: #ffc107">2</wv-swipe-item>
  4.   <wv-swipe-item style="background-color: #03a9f4">3</wv-swipe-item>
  5. </wv-swipe>

不自动播放

<wv-swipe :height="130" :autoplay="0">
  <wv-swipe-item style="background-color: #f44336">1</wv-swipe-item>
  <wv-swipe-item style="background-color: #ffc107">2</wv-swipe-item>
  <wv-swipe-item style="background-color: #03a9f4">3</wv-swipe-item>
</wv-swipe>

单张轮播

<wv-swipe :height="130" :show-indicators="false" :autoplay="5000">
  <wv-swipe-item style="background-color: #f44336">单张轮播</wv-swipe-item>
</wv-swipe>

API

  • swipe
    参数类型说明可选值默认值
    heightNumber高度（单位为像素）180
    durationNumber轮播动作时间（单位为毫秒）500
    default-indexNumber默认显示的轮播索引0
    autoplayNumber自动播放间隔，单位为毫秒，设置为0时不自动播放
    show-indicatorsBoolean显示轮播指示true
    no-drag-when-singleBoolean只有一张时不允许拉动true
    preventBoolean是否在 touchstart 事件触发时阻止事件的默认行为。设为 true 可提高运行在低版本安卓浏览器时的性能false

Slots

  • swipe

    name描述
    -一个或多个 swipe-item 组件

  • swipe-item

    name描述
    -单个轮播的内容