Question

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

参数	说明	类型	默认值	可选值
list	图片列表	Array	-	-
direction	滚动方向	String	horizontal	horizontal,vertical
show-dots	是否显示指示用的小点点	Boolean	true	true,false
dots-position	小点点位置	String	right	right,left,center
dots-class	提示className	String	-	-
show-desc-mask	显示描述下面的文字背景	Boolean	true	true,false
auto	是否自动播放	Boolean	false	true,false
loop	是否循环	Boolean	false	true,false
seterval	轮播停留时间	Number	3000	-
threshold	当滑动超过这个距离时才滑动	Number	50	-
duration	切换动画持续时间	Number	300	-
height	高度值。如果为100%宽度并且知道宽高比， 可以设置aspect-ratio自动计算高度	String	180px	-
aspect-ratio	用以根据当前可用宽度计算高度值	Number	-	-
min-moving-distance	超过这个距离时才滑动	Number	0	-
v-model	index绑定，使用v-model，一般不需要绑定	Number	0	-
-	-	-	-	-

Events

事件名	参数	说明	备注
on-index-change	currentIndex	轮播index变化时触发	-
on-get-height	height	高度获取后触发	-
on-click-list-item		点击单个item触发	-
-	-	-	-