vue-concise-slider 一个轻量的vue幻灯片组件
阅读 541
收藏 35
2017-07-03
原文链接：github.com
外卖订单处理有烦恼？试试美团点评餐饮开放平台吧，可实现自动接单／录单！http://developer.meituan.com/info
中文 | English
vue-concise-slider.js
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
版本
v2.1.2 支持vue2.0+
目前已实现
- 全屏自适应
- 移动端兼容
- 垂直滚动
- 定时自动切换
- 不定宽度滚动
- 无缝循环滚动
- 多级滚动
未来将实现
- 渐变滚动
- 视差效果
例子
安装
npm install vue-concise-slider --save如何使用
<template>
<slider :pages="pages" :sliderinit="sliderinit">
<!-- slot -->
</slider>
</template>
<script>
import slider from 'vue-concise-slider'// 引入slider组件
export default {
el: '#app',
data () {
return {
//图片列表[arr]
pages:[
{
title: '',
style:{
background:'url(src/img/testimg-1.jpg)'
}
},
{
title: '',
style:{
background:'url(src/img/testimg-2.jpg)'
}
},
{
title: 'slide3',
style:{
background:'#4bbfc3',
},
}
],
//滑动配置[obj]
sliderinit: {
currentPage: 0,//当前页码
thresholdDistance: 500,//滑动判定距离
thresholdTime: 100,//滑动判定时间
autoplay:1000,//自动滚动[ms]
loop:true,//循环滚动
direction:'vertical',//方向设置，垂直滚动
infinite:1,//无限滚动前后遍历数
slidesToScroll:1,//每次滑动项数
}
}
},
components: {
slider
}
}
</script>pages/初始化参数
| Option | Type | Default | Description |
|---|---|---|---|
title |
string | - | 当前设置为每页的标题，未来将直接输出html |
style |
obj | - | 直接作用在每个item上的style样式，可以输出背景图，背景色，每项宽度可自定义，自动切换为不定宽滚动 |
sliderinit/初始化参数
| Option | Type | Default | Description |
|---|---|---|---|
direction |
string | 'horizontal' | 方向设置，默认为水平滚动('horizontal'),可设置为垂直滚动('vertical') |
currentPage |
number | - | 当前为第几页 |
thresholdDistance |
number | - | 滑动距离阈值 |
thresholdTime |
number | - | 滑动时间阈值 |
autoplay |
number[ms] | - | 自动播放:时间[ms] |
loop |
boolean | false | 循环滚动 |
infinite |
number | 1 | loop无缝滚动时,可以设置前后遍历数 |
slidesToScroll |
number | 1 | 每次滑动切换的页数 |
API/父级传递的事件
| Method | Parameters | Description | Example |
|---|---|---|---|
slideTo |
number | 滑动到(number)页 | childComponents.$emit('slideTo', num) |
slideNext |
- | 滑动到下一页 | childComponents.$emit('slideNext') |
slideTo |
- | 滑动到上一页 | childComponents.$emit('slidePre') |
API/父级监听的事件
| Method | Parameters | Description | Example |
|---|---|---|---|
slide |
number | 当前滑动到第(number)页 | childComponents.$on('slide', function(pagenum){console.log(pagenum)}) |
本文复制自https://juejin.im/entry/5959f20f5188250d9b23ef37/