图片轮播 Swipe

图片轮播 Swipe

基本用法

**注意:因为仅支持触摸事件，所以请打开chrome手机模拟查看demo

<template lang="html">
<main>
     <div class="demo-hidden">
    <za-panel>
      <za-panel-header title="基本"></za-panel-header>
      <za-panel-body>
        <za-swipe
          direction='left'
          @changeStart='handleChangeStart'
          @changeEnd='handleChangeEnd'>
          <za-swipe-item
            :key='index'
            v-for='(i, index) in ITEMS'>
            <div class='swipe-item-pic'>
              <span style="display:block;width:100%;height:100px;text-align:center;line-height:100px;">{{i.img}}</span>
            </div>
          </za-swipe-item>
        </za-swipe>
      </za-panel-body>
    </za-panel>
    <za-panel>
      <za-panel-header title="纵向"></za-panel-header>
      <za-panel-body>
        <za-swipe
          direction='bottom'
          @changeStart='handleChangeStart'
          @changeEnd='handleChangeEnd'>
          <za-swipe-item
            :key='index'
            v-for='(i, index) in ITEMS'>
            <div class='swipe-item-pic'>
              <span style="display:block;width:100%;height:100px;text-align:center;line-height:100px;">{{i.img}}</span>
            </div>
          </za-swipe-item>
        </za-swipe>
      </za-panel-body>
    </za-panel>
    <za-panel>
      <za-panel-header title="循环轮播"></za-panel-header>
      <za-panel-body>
        <za-swipe
          ref='swipe'
          direction='left'
          loop
          @changeStart='handleChangeStart'
          @changeEnd='handleChangeEnd'>
          <za-swipe-item
            :key='index'
            v-for='(i, index) in ITEMS'>
            <div class='swipe-item-pic'>
              <span style="display:block;width:100%;height:100px;text-align:center;line-height:100px;">{{i.img}}</span>
            </div>
          </za-swipe-item>
        </za-swipe>
        <div class="controls" style="text-align:center;padding-bottom:20px;">
          <za-button
            size="sm"
            @click='onJumpTo'>无动画切换指定页</za-button>
          <za-button
            size="sm"
            style="margin-left:10px;"
            @click='onSlideTo'>滑动到指定页</za-button>
        </div>
      </za-panel-body>
    </za-panel>
    <za-panel>
      <za-panel-header title="自动循环轮播"></za-panel-header>
      <za-panel-body>
        <za-swipe
          direction='left'
          loop
          auto-play>
          <za-swipe-item
            :key='index'
            v-for='(i, index) in ITEMS'>
            <div class='swipe-item-pic'>
              <span style="display:block;width:100%;height:100px;text-align:center;line-height:100px;">{{i.img}}</span>
            </div>
          </za-swipe-item>
        </za-swipe>
      </za-panel-body>
    </za-panel>
  </div>
</main>
</template>
<script>
export default {
  data() {
    return {
      ITEMS:[
        {
          url: '#',
          img: "1",
        },
        {
          url: '#',
          img: "2",
        },
        {
          url: '#',
          img: "3",
        }],
      }
  },
  methods: {
    handleChangeStart(index){
      console.log(index);
    },
    handleChangeEnd(index){
      console.log(index);
    },
    onJumpTo(){
      this.$refs.swipe.onJumpTo(0)
    },
    onSlideTo(){
      this.$refs.swipe.onSlideTo(2)
    }
  },
};
</script>

API

Swipe Attributes

Swipe Events