转载

构建Vue.js组件:slider

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 组件支持两种特效： slide 和 fade 。

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

原文 https://segmentfault.com/a/1190000004698438

正文到此结束