脚本宝典收集整理的这篇文章主要介绍了vue-concise-slider vue滑动组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
中文 | English
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端
v2.2.0 支持vue2.0+
简单配置
轻量 (~17.8kB gzipPEd)
多种滑动样式
[x] 全屏自适应
[x] 移动端兼容
[x] 垂直滚动
[x] 定时自动切换
[x] 不定宽度滚动
[x] 无缝循环滚动
[x] 多级滚动
[ ] 渐变滚动
[ ] 视差效果
npm install vue-concise-slider --save
@H_403_126@<template>
<!-- 制作一个框架包裹slider -->
<div style="width:70%;margin:20px auto;height:400px">
<!-- 配置slider组件 -->
<slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
<!-- 设置loading,可自定义 -->
<div slot="loading">loading...</div>
</slider>
</div>
</template>
<script>
import slider from 'vue-concise-slider'// import slider components
export default {
el: '#app',
data () {
return {
//Image list
pages:[
{
html: '<div class="slider1">slider1</div>',
style: {
'background': '#1bbc9b'
}
},
{
html: '<div class="slider2">slider2</div>',
style: {
'background': '#4bbfc3'
}
},
{
html: '<div class="slider3">slider3</div>',
style: {
'background': '#7baabe'
}
}
],
//Sliding configuration [obj]
sliderinit: {
currentPage: 0,
thresholdDistance: 500,
thresholdTime: 100,
autoplay:1000,
loop:true,
direction:'vertical',
infinite:1,
slidesToScroll:1,
timingFunction: 'ease',
duration: 300
}
}
},
components: {
slider
},
methods: {
// Listener event
slide (data) {
console.log(data)
},
onTap (data) {
console.log(data)
},
onInit (data) {
console.log(data)
}
}
}
</script>
现代浏览器及ie10+
Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request
欢迎来留下你的意见:https://github.com/warpcgd/vu...
可以在这里提交,会尽快处理:https://github.com/warpcgd/vu...
以上是脚本宝典为你收集整理的vue-concise-slider vue滑动组件全部内容,希望文章能够帮你解决vue-concise-slider vue滑动组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。