构建Vue.js组件:slider

1680 查看

Slider组件的使用场景很多,主要为图片的展示。一个slider主要由顶层容器和每一'帧'的slide组成。下面通过一个例子尝试基于Vue.js去构建一个Slider组件,支持以下功能:

  • 上一帧/下一帧 导航

  • 自动播放

  • 播放效果(slide/fade)

  • 无限循环

  • Dot

  • Dot hover 导航

Slider 顶层容器

<template>
  <div class="wrapper">
    <ul id="slider">
      <slot></slot>
    </ul>
    <span class="prev" id="prev" v-show="control"></span>
    <span class="next" id="next" v-show="control"></span>
  </div>
</template>

<slot>标签处便是每一帧的slide,可在子组件中使用v-for结合一个储存图片地址的数组遍历输出。更多关于slot

api

由于slider 支持多个可用户自定义的api,所以需要在props中声明这些支持的自定义属性,以便在组件声明时使用:

// ...
props: {
  // 上一帧/下一帧 导航
  control: {
    type: Boolean,
    default: true
  },
  // 自动播放
  auto: {
    type: Boolean,
    default: false
  },
  // 播放效果(slide/fade)
  effect: {
    type: String,
    default: 'fade'
  },
  // dot
  dot: {
    type: Boolean,
    default: true
  },
  // Dot hover 导航
  dotHover: {
    type: Boolean,
    default: true
  },
  // Dot 位置(left | center | right)
  dotFloat: {
    type: String,
    default: 'center'
  }
},
// ...

滑动特效

slider 组件支持两种特效:slidefade

  • slide特效的每一次滑动都改变slider的right值,结合CSS3的transition来实现滑动。

  • fade特效为改变当前帧的opacity趋向0,目标帧的opacity趋向1,通过一个定时器setTimeout控制,从而实现渐隐渐现的效果。这时需考虑自动播放为true时手动去点击上一帧/下一帧时需先清除这个定时器。

如何使用

import slider from 'slider'
import slide from 'slide'

然后...

<slider control="true" dot="true" dot-float="center" effect="fade">
  <slide v-for="item in items">
     <li>
       <div>{{$index}}</div>
     </li>
  </slide>
</slider>

当当当 好了.

说了那么多( ̄ー ̄),源码-> Link