vue-concise-slider 一個輕量的vue幻燈片組件

閱讀 541

收藏 35

2017-07-03

原文鏈接： github.com

外賣訂單處理有煩惱？試試美團點評餐飲開放平台吧，可實現自動接單／錄單！http://developer.meituan.com/info

中文 | English

vue-concise-slider.js

  

---

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

 

本文復制自https://juejin.im/entry/5959f20f5188250d9b23ef37/