私信发送成功
Watch Star Fork

Cweili / vue-slider

Fork from https://github.com/warpcgd/vue-slider http://cweili.oschina.io/vue-slider/
克隆/下载
李熙晨 最后提交于 2017-10-30 15:17 perfecting demo
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
2016-08-11 01:47
Loading...
README.md 6.16 KB

中文 | English

vue-concise-slider.js

npm npm npm


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

版本

v2.1.2 支持vue2.0+

目前已实现

  • 全屏自适应
  • 移动端兼容
  • 垂直滚动
  • 定时自动切换
  • 不定宽度滚动
  • 无缝循环滚动
  • 多级滚动

未来将实现

  • 渐变滚动
  • 视差效果

例子

slider效果 完整文档

安装

  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)})
tap number 当前点击第(number)页 childComponents.$on('tap', function(pagenum){console.log(pagenum)})

有更好的想法?

欢迎来留下你的意见:https://github.com/warpcgd/vue-concise-slider/issues/1

BUG?oh no!

可以在这里提交,会尽快处理:https://github.com/warpcgd/vue-concise-slider/issues/2

项目点评 ( 0 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close