vue-concise-slider vue滑动组件

简介简介】vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端。特点是:配置简单、轻量(17kb)、多种滑动样式【可以实现的功能】全屏自适应移动端兼容垂直滚动定时自动切换不定宽度滚动无缝循环滚动多级滚动【当前demo步骤】1. 先使用vue-cli搭建起一个vue的脚手架详情查看--【广州前端】vue-cli脚手架一看就懂的入门教程2

简介】

vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端。特点是:配置简单、轻量(17kb)、多种滑动样式


【可以实现的功能】

全屏自适应

移动端兼容

垂直滚动

定时自动切换

不定宽度滚动

无缝循环滚动

多级滚动


【当前demo步骤】

1. 先使用vue-cli搭建起一个vue的脚手架

详情查看--【广州前端】vue-cli脚手架一看就懂的入门教程

2. 安装包

[AppleScript] 纯文本查看 复制代码

?

1
npm install vue-concise-slider --save



【代码】

[HTML] 纯文本查看 复制代码

?

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
  <!--  制作一个框架包裹slider,设置宽度和高度 -->
   <div style="width:100%;margin:20px auto;height:400px">
        <!-- 配置slider组件  -->
        <slider ref="slider" :options="options">
            <!-- 使用slideritem组件   -->
            <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
            <!-- 设置loading,可自定义 -->
            <div slot="loading">loading...</div>
        </slider>
   </div>
  </template>
  <script>
  // import slider components
  import { slider, slideritem } from 'vue-concise-slider'
  export default {
     el: '#app',
     data () {
        return {
          //data list [array]
          someList:[
            {
              html: 'slide1',
              style: {
                'background': '#1bbc9b'
              }
            },
            {
              html: 'slide2',
              style: {
                'background': '#4bbfc3'
              }
            },
            {
              html: 'slide3',
              style: {
                'background': '#7baabe'
              }
            }
          ],
          //Slider configuration [obj]
          options: {
            currentPage: 0
          }
        }
      },
      components: {
        slider,
        slideritem
      }
  }
  </script>


【效果图】

174135a5uo8ek45de7k4ze.png.thumb.jpg


【参数】

[size=10.5000pt]1. pages/初始化参数

Option

Type

Default

Description

title

string

[size=10.5000pt]-

当前设置为每页的标题,未来将直接输出html

[size=10.5000pt]

style[size=10.5000pt]        

obj

[size=10.5000pt]-

直接作用在每个item上的style样式,可以输出背景图,背景色,每项宽度可自定义,自动切换为不定宽滚动

[size=10.5000pt]



[size=10.5000pt]2. sliderinit/初始化参数

Option

Type

Default

Description

direction

string

'horizontal'

方向设置,默认为水平滚动('horizontal'),可设置为垂直滚动('vertical')

currentPage

number

[size=10.5000pt]-

当前为第几页

thresholdDistance

number

[size=10.5000pt]

滑动距离阈值

thresholdTime

number

[size=10.5000pt]

滑动时间阈值

autoplay

Number[ms]

[size=10.5000pt]

自动播放:时间[ms]

loop

boolean

[size=10.5000pt]

循环滚动

infinite

number

[size=10.5000pt]

loop无缝滚动时,可以设置前后遍历数

slidesToScroll

number

[size=10.5000pt]

每次滑动切换的页数


[size=10.5000pt]3. API/父级传递的事件

Method

Parameters

Description

Example

slideTo

number

滑动到(number)

childComponents.$emit('slideTo', num)

slideNext

[size=10.5000pt]

滑动到下一页

childComponents.$emit('slideNext')

slideTo

[size=10.5000pt]

滑动到上一页

childComponents.$emit('slidePre')


[size=10.5000pt]4. API/父级监听的事件

Method

Parameters

Description

Example

slide

number

当前滑动到第(number)

childComponents.$on('slide', function(pagenum){console.log(pagenum)})


本文转自:https://blog.51cto.com/14360146/2430781