vue-seamless-scroll介紹和使用

vue-seamless-scroll

簡介及使用教程

vue-seamless-scroll是一個基於Vue.js的簡單無縫滾動組件, 基於requestAnimationFrame實現,配置多滿足多樣需求。目前支持上下左右無縫滾動，單步滾動，以及支持水平方向的手動切換功能

安裝

1.npm

npm install vue-seamless-scroll --save

2.yarn

yarn add vue-seamless-scroll

3.瀏覽器CDN

https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js

使用

1.全局注冊

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})

2.局部注冊

import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }

3.簡單使用

<div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
</div>

4.配置項

key	description	default	val
step	數值越大速度滾動越快	1	Number
limitMoveNum	開啟無縫滾動的數據量	5	Number
hoverStop	是否啟用鼠標hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移動端開啟touch滑動	true	Boolean
singleHeight	單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1	0	Number
singleWidth	單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3	0	Number
waitTime	單步停止等待時間(默認值1000ms)	1000	Number
switchOffset	左右切換按鈕距離左右邊界的邊距(px)	30	Number
autoPlay	1.1.17版本前手動切換時候需要置為false	true	Boolean
switchSingleStep	手動單步切換step值(px)	134	Number
switchDelay	單步切換的動畫時間(ms)	400	Number
switchDisabledClass	不可以點擊狀態的switch按鈕父元素的類名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否開啟rem度量	false	Boolean
navigation	左右方向的滾動是否顯示控制器按鈕，true的時候autoPlay自動變為false	false	Boolean

5.回調事件

name	description	calback params
ScrollEnd	一次滾動完成的回調事件	null

示例