简介】
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端。特点是:配置简单、轻量(17kb)、多种滑动样式
【可以实现的功能】
全屏自适应
移动端兼容
垂直滚动
定时自动切换
不定宽度滚动
无缝循环滚动
多级滚动
【当前demo步骤】
1. 先使用vue-cli搭建起一个vue的脚手架
详情查看--【广州前端】vue-cli脚手架一看就懂的入门教程
2. 安装包
[AppleScript] 纯文本查看 复制代码
1
|
npm install vue
-
concise
-
slider
--save
|
【代码】
[HTML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<
template
>
<!-- 制作一个框架包裹slider,设置宽度和高度 -->
<
div
style
=
"width:100%;margin:20px auto;height:400px"
>
<!-- 配置slider组件 -->
<
slider
ref
=
"slider"
:options
=
"options"
>
<!-- 使用slideritem组件 -->
<
slideritem
v-for
=
"(item,index) in someList"
:key
=
"index"
:style
=
"item.style"
>{{item.html}}</
slideritem
>
<!-- 设置loading,可自定义 -->
<
div
slot
=
"loading"
>loading...</
div
>
</
slider
>
</
div
>
</
template
>
<
script
>
// import slider components
import { slider, slideritem } from 'vue-concise-slider'
export default {
el: '#app',
data () {
return {
//data list [array]
someList:[
{
html: 'slide1',
style: {
'background': '#1bbc9b'
}
},
{
html: 'slide2',
style: {
'background': '#4bbfc3'
}
},
{
html: 'slide3',
style: {
'background': '#7baabe'
}
}
],
//Slider configuration [obj]
options: {
currentPage: 0
}
}
},
components: {
slider,
slideritem
}
}
</
script
>
|
【效果图】
【参数】
[size=10.5000pt]1. pages/初始化参数
Option |
Type |
Default |
Description |
title |
string |
[size=10.5000pt]- |
当前设置为每页的标题,未来将直接输出html [size=10.5000pt] |
style[size=10.5000pt] |
obj |
[size=10.5000pt]- |
直接作用在每个item上的style样式,可以输出背景图,背景色,每项宽度可自定义,自动切换为不定宽滚动 [size=10.5000pt] |
[size=10.5000pt]2. sliderinit/初始化参数
Option |
Type |
Default |
Description |
direction |
string |
'horizontal' |
方向设置,默认为水平滚动('horizontal'),可设置为垂直滚动('vertical') |
currentPage |
number |
[size=10.5000pt]- |
当前为第几页 |
thresholdDistance |
number |
[size=10.5000pt] |
滑动距离阈值 |
thresholdTime |
number |
[size=10.5000pt] |
滑动时间阈值 |
autoplay |
Number[ms] |
[size=10.5000pt] |
自动播放:时间[ms] |
loop |
boolean |
[size=10.5000pt] |
循环滚动 |
infinite |
number |
[size=10.5000pt] |
loop无缝滚动时,可以设置前后遍历数 |
slidesToScroll |
number |
[size=10.5000pt] |
每次滑动切换的页数 |
[size=10.5000pt]3. API/父级传递的事件
Method |
Parameters |
Description |
Example |
slideTo |
number |
滑动到(number)页 |
childComponents.$emit('slideTo', num) |
slideNext |
[size=10.5000pt] |
滑动到下一页 |
childComponents.$emit('slideNext') |
slideTo |
[size=10.5000pt] |
滑动到上一页 |
childComponents.$emit('slidePre') |
[size=10.5000pt]4. API/父级监听的事件
Method |
Parameters |
Description |
Example |
slide |
number |
当前滑动到第(number)页 |
childComponents.$on('slide', function(pagenum){console.log(pagenum)}) |