连江火车站,护士报名,汪苏泷by2
vue-concise-slider
vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和pc端
版本
支持vue2.0+
特点
目前已实现
未来将实现
链接
安装
npm install vue-concise-slider --save
如何使用
<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+
贡献
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论