Swiper 滑动操作

import { Swiper,SwiperItem } from 'feui';
components: {
  [Swiper.name]: Swiper,
  [SwiperItem.name]: SwiperItem,
}

代码演示

正经用法

<fe-swiper :list="demo01_list" v-model="demo02_index" 
  @on-index-change="demo01_onIndexChange">
</fe-swiper>

自动轮播

<fe-swiper :list="demo03_list" auto style="width:80%;margin:0 auto;" 
  height="180px" dots-class="custom-bottom" dots-position="center">
</fe-swiper>

swiper-item 自定义高度

<fe-swiper auto height="100px">
  <swiper-item class="black">
      <h2 class="title fadeInUp animated">原力与你同在</h2>
  </swiper-item>
  <swiper-item class="black">
      <h2 class="title fadeInUp animated">尽在游戏中</h2>
  </swiper-item>
  <swiper-item class="black">
      <h2 class="title fadeInUp animated">欢迎来到下一关</h2>
  </swiper-item>
  <swiper-item class="black">
      <h2 class="title fadeInUp animated">玩乐未来</h2>
  </swiper-item>
  <swiper-item class="black">
      <h2 class="title fadeInUp animated">伟大，值得等待</h2>
  </swiper-item>
  <swiper-item class="black">
      <h2 class="title fadeInUp animated">你玩什么游戏</h2>
  </swiper-item>
</fe-swiper>

文字滚动

<fe-swiper auto height="30px" direction="vertical" :interval=2000 
  class="text-scroll" :show-dots="false">
    <swiper-item>
        <p><a href='http://ifuyuan.wang'>向着网络强国新时代昂首迈进</a>
        </p>
    </swiper-item>
    <swiper-item>
        <p><a href='http://ifuyuan.wang'>国际政要点赞“中国梦”  领航新征程</a>
        </p>
    </swiper-item>
    <swiper-item>
        <p><a href='http://ifuyuan.wang'>一个万亿级公司诞生：33万名员工、创四个世界之最</a>
        </p>
    </swiper-item>
    <swiper-item>
        <p><a href='http://ifuyuan.wang'>奇葩！出狱不到十天再被抓 只因看守所有吃有喝</a>
        </p>
    </swiper-item>
    <swiper-item>
        <p><a href='http://ifuyuan.wang'>传A站已被关停：没钱交电费被拉闸</a>
        </p>
    </swiper-item>
    <swiper-item>
        <p><a href='http://ifuyuan.wang'>比尔盖茨凭什么能当中国工程院院士？</a>
        </p>
    </swiper-item>
</fe-swiper>

循环模式

<fe-swiper loop auto :list="demo07_list" :index="demo07_index" 
  @on-index-change="demo07_onIndexChange">
</fe-swiper>
<p>current index: {{demo07_index}}</p>

API

Events