脚本宝典收集整理的这篇文章主要介绍了构建Vue.js组件:slider,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Slider组件的使用场景很多,主要为图片的展示。一个slider主要由顶层容器和每一'帧'的slide组成。下面通过一个例子尝试基于Vue.js去构建一个Slider组件,支持以下功能:
上一帧/下一帧 导航
自动播放
播放效果(slide/fade)
无限循环
Dot
Dot hover 导航
<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
由于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
以上是脚本宝典为你收集整理的构建Vue.js组件:slider全部内容,希望文章能够帮你解决构建Vue.js组件:slider所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。