vue-concise-slider vue滑动组件

简介】

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

【可以实现的功能】

全屏自适应

移动端兼容

垂直滚动

定时自动切换

不定宽度滚动

无缝循环滚动

多级滚动

扫描二维码关注公众号，回复： 7065101 查看本文章

【当前demo步骤】

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

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

2. 安装包

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

1	`npm install vue` `-` `concise` `-` `slider` `--save`

【代码】

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

 
      < 
      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 
      >

 
      </ 
      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 
      >

【效果图】

【参数】

[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)})

vue-concise-slider vue滑动组件

猜你喜欢