转载

vue-slider 一个轻量的 vue 滑动组件

vue-slider.js

vue-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端

未来将实现

定时自动切换
垂直滚动
无缝滚动
渐变滚动
视差效果

例子

基本例子完整demo

快速开始使用

通过以下demo来实现

app.vue父级组件

<template>
  <slider :pages="someList" :sliderinit="sliderinit">
    <!-- slot  -->
  </slider>
</template>

<script>
import slider from './slider'// 引入slider组件
export default {
   el: '#app',
   data () {
      return {
        //图片列表[arr]
        someList:[
          {
            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,
          start: {},
          end: {},
          tracking: false,
          thresholdTime: 500,//滑动判定距离
          hresholdDistance: 100,//滑动判定时间
        }
      }
    },
    components: {
        slider
    }
}
</script>

sliderinit/初始化参数

Option	Type	Default	Description
`currentPage`	number	-	当前为第几页
`thresholdTime`	number	-	滑动距离阈值
`hresholdDistance`	number	-	滑动时间阈值

API/父级传递的事件

Method	Parameters	Description	Example
`slideTo`	number	滑动到(number)页	`this.$broadcast('slideTo', num)`
`slideNext`	-	滑动到下一页	`this.$broadcast('slideNext')`
`slideTo`	-	滑动到上一页	`this.$broadcast('slidePre')`